web-dev-qa-db-ja.com

display = noneのオプションはIE

選択には複数のオプションがあります。私はオプションをソートし、jqueryで重複するオプションを無効にして非表示にしました。このコードは、chromeとfirefoxでうまく機能しますが、IEとsafariでは、display：noneのオプションがまだ表示されています。

コードの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/

htmlinternet-explorerselect
29
MJQ

IEはstyle="display:none;"タグの<option>をサポートしていません。

唯一のオプションは、HTMLの作成の一部として、またはクライアント側スクリプトを介して、それらを削除することです。

33
freefaller

それでも誰かがこの問題に直面している場合、ここに私の解決策があります、それは役に立つかもしれません：

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

これにより、すべてのブラウザでオプションが非表示になり、非表示にできない場合は無効になります:)。オプションを元に戻すには、忘れずに有効にしてください。

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

これを行うには、detach()およびremove()を使用できます。

3
Zhangjiang Huang

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

2
Nick Cordova

次のJを使用してオプションタグを非表示にします

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

1
Divya Bhalodiya

「古い質問」に対する私の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));
        });


  });

})

ここでのアイデアは、クライアント側ですべての値を配列にロードし、メイン選択の変更イベントで必要なオプションのみを追加することです。誰かがこれが役立つことを願っています。

1
Stephen
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
Namrata S Jain

@ 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());
});
0
SharpC

ここでの同じ問題IE 10、11、Edge .. Firefox、Chromeなどのオプションは消えません。

（jQuery-Code）

動作しない：

  • $（ 'option'）。hide（）;
  • $（ 'option'）。attr（ 'style'、 'display：none！important'）;
  • $（ 'option'）。attr（ 'disabled'、 'disabled'）;

しかし、それは機能します！

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

次のコードを試してください

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