发表新帖
发表新帖

Options with display:none not hidden in IE

后端 未结
关注
10 1015
梦如初夏
梦如初夏 2020-11-27 17:41

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

相关标签:
10条回答
  • 隐瞒了意图╮
    2020-11-27 18:18

    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());
});
    0 讨论(0)
  • 天涯浪人
    2020-11-27 18:22

    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/

    0 讨论(0)
  • 抹茶落季
    2020-11-27 18:24 
    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);
                }
            }
        }
    0 讨论(0)
  • 终归单人心
    2020-11-27 18:26

    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.

    0 讨论(0)
  • 庸人自扰
    2020-11-27 18:28

    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>
    0 讨论(0)
  • 清酒与你
    2020-11-27 18:29

    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();
    0 讨论(0)
 看不清?
提交回复
热议问题