Параметры с дисплеем: ни один не скрыт в IE

У меня есть несколько вариантов в select. Я отсортировал параметры и отключил и скрыл дубликаты параметров с помощью jquery. Код хорошо работает в chrome и firefox, но в IE и сафари параметры с дисплеем: ни один из них не отображается.

Вот jsfiddle кода:

<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/

Ответы

Ответ 1

IE не поддерживает теги style="display:none;" на <option>.

Единственный вариант - удалить их - либо как часть создания HTML, либо через клиентскую часть script.

Ответ 2

Если кто-то по-прежнему сталкивается с этой проблемой, вот мое решение, это может быть полезно:

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

Это скрывает параметр во всех браузерах и отключает, если не удается скрыть:). Чтобы вернуть этот параметр, не забудьте включить его:

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

Ответ 3

Вы можете использовать detach() и remove() чтобы сделать это.

Ответ 4

Расширение ответа на вопрос Zhangjiang Huang:. В основном вы кешируете все опции, отключаете их от выпадающего списка, а затем снова присоединяете те, которые вы хотите.

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

Ответ 5

Используйте следующие Js, чтобы скрыть тег опции

<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();

Ссылка: jsfiddle.net/p8Gmm/7

Или

Ссылка:

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

Ответ 6

мои 2 цента стоят по "старому вопросу", но все же актуальной проблемой.

Серверная сторона:

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

на стороне клиента:

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));
        });


  });

})

Идея здесь на стороне клиента. Я загружаю все значения в массив, а затем при изменении события основного выбора добавляю только нужные параметры. Надеюсь, кто-то найдет это полезным.

Ответ 7

Попробуйте следующий код

<!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>

Ответ 8

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);
                }
            }
        }

Ответ 9

Решение от @Gev - это хорошо, но параметры все равно появляются (хотя и отключены), поэтому поведение в разных браузерах противоречиво.

Вы можете изменить тег option на что-то еще, что останавливает его появление, но тогда вы потеряете любые атрибуты или теги данных HTML5.

Решение, которое я придумала, заключалось в том, чтобы обернуть любые опции, которые вы хотите отключить, в другой тег (в данном случае это вымышленный, который выполняет свою работу и проясняет, что происходит).

Начиная с примера опций и с дополнительными тегами данных:

<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>

Чтобы скрыть опции, которые вам не нужны:

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

Чтобы отменить все вышеперечисленное во всем списке, прежде чем скрывать различные варианты:

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

Ответ 10

Та же проблема здесь, в IE 10, 11, Edge.. Параметры не исчезнут, как в Firefox, Chrome,..

(JQuery-код)

Не работает:

$ ( 'Вариант') скрыть().
$ ('option'). attr ('style', 'display: none! Important');
$ ('option'). attr ('disabled', 'disabled');

Но это работает!

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