CODEWITHSUNDEEP
htmlinternet-explorerselect
MJQ
MJQ

Reputation: 1786

Options with display:none not hidden in IE

I have multiple options in a select. I have sorted the options and disabled and hidden the duplicate options with jquery. The code works well in chrome and firefox but in IE and safari, the options with display:none are still showing up.

Here is the jsfiddle of the code:

<select>
  <option value="5797">34</option>
  <option value="5809">37</option>
  ... 
  <option value="5653">71</option>
  <option disabled="" selected="selected" value="53">Eye</option>
  <option disabled="disabled" style="display: none;" value="5441">52</option>
  <option disabled="disabled" style="display: none;" value="5443">52</option>
  ...
  <option disabled="disabled" style="display: none;" value="5431">51</option>
</select>

http://jsfiddle.net/7vUdb/

Upvotes: 34

Views: 54932

Answers (10)

mobdd
mobdd

Reputation: 49

Same problem here in IE 10, 11, Edge.. Options will not disapear like in Firefox, Chrome, ..

(jQuery-Code)

Works not:

  • $('option').hide();
  • $('option').attr('style', 'display: none !important');
  • $('option').attr('disabled', 'disabled');

But that works!

$('option').unwrap('div').wrap('<div style="display: none;" />');

Upvotes: 1

SharpC
SharpC

Reputation: 7454

The solution by @Gev is good, but the options still appear (even though disabled), so the behaviour is inconsistent across browsers.

You could amend the option tag to something else which stops it appearing, but then you lose any attributes or HTML5 data tags.

The solution I came up with was to wrap any options you want disabled in a different tag (in this case a made up one, which does the job and makes it clear what's happening).

Starting with example of options also with optional data tags:

<select id="myselections">
  <option data-something="a" value="5797">34</option>
  <option data-something="f" value="5809">37</option>
  <option data-something="j" value="5653">71</option>
</select>

To hide the options you don't want:

$("#myselections > option").each(function () {
    if(some check) {
        $(this).wrap("<optionhidden></optionhidden>");
    }
});

To undo the above on the whole list before hiding different options:

$("#myselections > optionhidden").each(function () {
    $(this).replaceWith($(this).html());
});

Upvotes: 1

Zhangjiang Huang
Zhangjiang Huang

Reputation: 41

You can use detach() and remove() to do this.

Upvotes: 4

Nick Cordova
Nick Cordova

Reputation: 754

Expanding on Zhangjiang Huang's answer: Pretty much you cache all the options, detach them from the drop-down, then you reattach the ones you want.

JQuery:

(function(){
   // Cache List
   var options = $("select option");

   // Clear list
   options.detach();
   // Rebuild list
   options.not(".disabled").appendTo("select");
   // Set Default
   $("select").val("");
})();

HTML:

<select>
   <option value="">---Select One---</option>
   <option value="5797">34</option>
   <option value="5809">37</option>
    ... 
   <option value="5653">71</option>
   <option class="disabled" value="53">Eye</option>
   <option class="disabled"value="5441">52</option>
   <option class="disabled" value="5443">52</option>
   ...
   <option class="disabled" value="5431">51</option>
</select>

jsfiddle

Upvotes: 3

Namrata S Jain
Namrata S Jain

Reputation: 1

sort by disabled options. 

$("#addselect option").each(function (i, val) {
                if ($(this)[i].disabled) {
                    moveDown("selectId");
                }
                else {
                    moveUp("selectId");
                }
 }

   function moveUp(selectId) {
            var selectList = document.getElementById(selectId);
            var selectOptions = selectList.getElementsByTagName('option');
            for (var i = 1; i < selectOptions.length; i++) {
                var opt = selectOptions[i];
                if (!opt.disabled) {
                    selectList.removeChild(opt);
                    selectList.insertBefore(opt, selectOptions[i - 1]);
                }
            }
        }

        function moveDown(selectId) {
            var selectList = document.getElementById(selectId);
            var selectOptions = selectList.getElementsByTagName('option');
            for (var i = selectOptions.length - 2; i >= 0; i--) {
                var opt = selectOptions[i];
                if (opt.disabled) {
                    var nextOpt = selectOptions[i + 1];
                    opt = selectList.removeChild(opt);
                    nextOpt = selectList.replaceChild(opt, nextOpt);
                    selectList.insertBefore(nextOpt, opt);
                }
            }
        }

Upvotes: 0

user85230
user85230

Reputation: 26

Try this following code

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
var detachedSecondElem,detachedFirstElem="";
var firstDetachedAt, secondDetachedAt;
function changedFirst(){
 var val1=$('#slct').val();
 if(detachedSecondElem!="")
  $( detachedSecondElem ).insertAfter( $("#slct1 option").eq((secondDetachedAt-1)) );

 if(val1!=""){
   secondDetachedAt = $('#slct1 option[value="'+val1+'"]').prevAll().length;
   detachedSecondElem = $('#slct1 option[value="'+val1+'"]').detach();
 }
}
function changedSecond(){
 var val2=$('#slct1').val();
 if(detachedFirstElem!="")
  $( detachedFirstElem).insertAfter( $("#slct option").eq((firstDetachedAt-1)) );

 if(val2!=""){
   firstDetachedAt= $('#slct option[value="'+val2+'"]').prevAll().length;
   detachedFirstElem= $('#slct option[value="'+val2+'"]').detach();
 }
}
</script>
</head>
<body>
<select id="slct" onchange="changedFirst();"> 
 <option value="">Select</option>
 <option value="0">0</option>
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option>
</select>
<select id="slct1" onchange="changedSecond();"> 
 <option value="">Select</option>
 <option value="0">0</option>
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option>
</select>
<input type="button" value="click me" onclick="disableOption();"/>
<input type="button" value="click me" onclick="attachElem();"/>
</body>
</html>

Upvotes: 0

Stephen
Stephen

Reputation: 1542

my 2 cents worth on an "old question", yet still a relevant issue.

Server side:

protected void Page_Load(object sender, EventArgs e)
{
   if (!IsPostBack)
   { //load subDropDownList all possible values [with an attribute for filtering] }
}

Client-side:

var optionList = null;
$(function(){
  if (!optionList)
  {
     optionList = new Array();
     $("[id$='subDropDownList'] option").each(function () {
         optionList.push({value: $(this).val(), text: $(this).text(), filterID: $(this).data("filterid") }); 
      });
  } 

  $("[id$='mainDropDownList']").on("change", function (e) {
     var filterID = $(this).val();
     $("[id$='subDropDownList']").html("");

     $.each(optionList, function () {
        if (this.filterID == filterID)
          $("[id$='subDropDownList']").append($("<option></option>").val(this.value).html(this.text).data("filterid", this.filterID));
        });


  });

})

The idea here is on client side I load all values into an array, then on change event of the main select I add only the required options. Hope someone finds this helpful.

Upvotes: 1

Gev
Gev

Reputation: 439

If somebody still faces this issue, here is my solution, it may be helpfull:

$('select.some-list option[id=someId]').attr('disabled', 'disabled').hide();

This hides the option in all browsers and disables if can't hide :). To bring back the option do not forget to enable it:

$('select.some-list option[id=someId]').removeAttr('disabled').show();

Upvotes: 21

Divya Bhaloidiya
Divya Bhaloidiya

Reputation: 5064

Use following Js to hide option tag 

<select id="selectlist">
      <option value="5797">34</option>
      <option value="5809">37</option>
       <option value="5653">71</option>
      <option  value="53">Eye</option>
      <option  value="5441">52</option>
      <option  value="5443">52</option>
      <option value="5431">51</option>
    </select>


$('#selectlist option[value=53]').hide();
$('#selectlist option[value=52]').hide();
$('#selectlist option[value=5443]').hide();

Ref : jsfiddle.net/p8Gmm/7

Or

Ref :

http://jsfiddle.net/chiragvidani/vhKdw/

Upvotes: 1

freefaller
freefaller

Reputation: 19953

IE doesn't support style="display:none;" on <option> tags.

Your only option is to remove them - either as part of the creation of the HTML, or via client-side script.

Upvotes: 37

Related Questions