7

オプション要素にいくつかstyle='display:none'ありますが、Chromeではうまく機能しますが、IEでは機能しないことに気付きました。

<select>
 <option style="display:none;">One</option>
 <option>Two</option>
 <option style="display:none;">Three</option>
 <option>Four</option>
</select>

jQueryを使用してdisplay:none、要素を見つけて削除するオプションをループする方法は<option>?

4

5 に答える 5

1

John Boker のソリューションは、この質問に対する適切なソリューションです。ただし、オプションを削除すると、それらのオプションを取得できなくなるという欠点があります。

1 つの解決策は、タグ<select>を削除する前にの完全な HTML を保存することです。<option>

var $s = $('select');
$s.data("originalHTML", $s.html());

これを逆にすることで簡単に復元できます。$s.html($s.data("originalHTML"));

完全な詳細はこのソリューションにあります: https://stackoverflow.com/a/24439289/1766230

また例: http://jsfiddle.net/luken/9CYjy/

于 2014-06-26T20:27:36.190 に答える
0

今日、私は同じ問題を抱えていました。不要なオプションを削除しないと、期待した結果が得られません。しかし問題は、後でそれらを表示したい場合に、これらのオプションを記憶する必要があることです。

私のソリューションは非常にシンプルで、すべての主要なブラウザーで動作します。

function filterList(oList, rxSearch)
{
  // Create backup of the old option list (only once)
  if(typeof(oList.tagOptions) === "undefined")
  {
    // Save current options
    oList.tagOptions = [ ];  // Generate a dynamic property for this DOM object
    for(var i = 0; i < oList.options.length; ++i)
      oList.tagOptions.push(oList.options[i]);
  }

  // Clear the current option list
  while(oList.options.length)
    oList.options.remove(0);

  // Add only those options which match the regular expression
  for(var i = 0; i < oList.tagOptions.length; ++i)
  {
    if(rxSearch.test(oList.tagOptions[i].text))
      oList.options.add(oList.tagOptions[i]);
  }
}

秘訣は、オプション要素が最初の実行時に動的に作成された tagOptions プロパティにコピーされることです。これらの削除されたオプション DOM 要素への (tagOptions 内の) 参照がまだ存在するため、それらは解放されません。さらに、そのためのグローバル変数は必要ありません。その後、表示されているオプション (oList.options) はクリアされ、検索語に一致するオプションのみが追加されます。

次の HTML コードを使用します。

<select id="myList" size="10">
<option>apple</option>
<option>advocado</option>
<option>banana</option>
<option>coconut</option>
</select>

次のように呼び出します。

filterList(document.getElementById("myList"), /^a/i);  // Display only those elements, which start with an a
alert("Display all with a");
filterList(document.getElementById("myList"), /^b/i);  // Display only those elements, which start with an b
alert("Display all with b");
filterList(document.getElementById("myList"), /^/i);   // Display only those elements, which start with an c
alert("Display all");

Firefox、Internet Explorer 11、Chrome、および Opera でこれをテストしました。それは私の目的のためにうまくいきます。

function filterList(oList, rxSearch)
{
  // Create backup of the old option list (only once)
  if(typeof(oList.tagOptions) === "undefined")
  {
    // Save current options
    oList.tagOptions = [ ];  // Generate a dynamic property for this DOM object
    for(var i = 0; i < oList.options.length; ++i)
      oList.tagOptions.push(oList.options[i]);
  }

  // Clear the current option list
  while(oList.options.length)
    oList.options.remove(0);

  // Add only those options which match the regular expression
  for(var i = 0; i < oList.tagOptions.length; ++i)
  {
    if(rxSearch.test(oList.tagOptions[i].text))
      oList.options.add(oList.tagOptions[i]);
  }
}

filterList(document.getElementById("myList"), /^a/i);  // Display only those elements, which start with an a
alert("Display all with a");
filterList(document.getElementById("myList"), /^b/i);  // Display only those elements, which start with an b
alert("Display all with b");
filterList(document.getElementById("myList"), /^/i);   // Display only those elements, which start with an c
alert("Display all");
<select id="myList" size="10">
<option>apple</option>
<option>advocado</option>
<option>banana</option>
<option>coconut</option>
</select>

于 2015-11-24T11:04:37.217 に答える
0

私は同じ問題を抱えていましたが、少し複雑でした。はい、IE/Chrome/Safari で非表示にするオプションを削除する必要があります。

ただし、場合によっては、条件 /filter に基づいてオプションのグループを非表示remove()にし、完全に削除する必要があります。この問題には次の解決策があります。オプションは削除されますが、削除されたオプションは同じselect要素のデータ属性に保持され、必要に応じて、指定された並べ替え順序 (値またはラベル) で再入力されます。

言いましょう：

<select id='sorty' multiple=true>
    <option value="1">Group A</option>
    <option value="2">Group B</option>
    <option value="3">Group c</option>
    <option value="4">Group D</option>
    <option value="5">Group D</option>
</select>

<button onclick="HideG('A')">Hide Group A</button>
<button onclick='HideG("B")'>Hide Group B</button>
<button onclick='HideG("C")'>Hide Group C</button>
<button onclick='HideG("D")'>Hide Group D</button>
<button onclick='ShowAll()'>Show ALL</button>

(Jquery が必要):

function selectOptionFilter(src,filter,sortBy)
{
   if(!$(src).data('hiddenOpts'))
      $(src).data('hiddenOpts',[]);

   //re-insert while keeping sort order by value or label 
   $($(src).data('hiddenOpts')).each(function(){
      var hiddenOpt=this;
      var positioned=false;
      $(src).find('option').each(function(i){
        if((sortBy=='value' && $(this).attr('value')*1 > $(hiddenOpt).attr('value'))
           ||
           (sortBy=='label' && $(this).text() > $(hiddenOpt).text())
          ){
          $(this).before(hiddenOpt);
          positioned=true;  
          //break
          return false;
        }
      }); 
      //else append       
      if(!positioned){
        $(src).append(hiddenOpt);
      }
   });

   //clean the hidden list
   $(src).data('hiddenOpts',[]);

   //apply the filter and remove options
    if( typeof filter=='function'){
        $(src).find('option').filter(filter).each(function(){
            $(src).data('hiddenOpts').push($(this).remove());
      });
   }
}

function HideG(xname){ 
  selectOptionFilter($('#sorty'),function(){
   return ( $(this).text().indexOf(xname) > -1);
   },'value');  
}

function ShowAll(){
  selectOptionFilter($('#sorty'),function(){ return false;},'value');
}

より複雑なフィルター関数を渡して、必要なオプションを削除できます。

ワーキングデモ

于 2014-06-12T06:08:24.200 に答える