在jquery中隐藏/显示选择框选项？答案

【问题标题】：Hiding/showing the select box options in jquery?在jquery中隐藏/显示选择框选项？
【发布时间】：2012-12-17 12:46:55
【问题描述】：

我在jsp中有以下代码sn-p

<HTML>
 <BODY>
     <select id="customerIds" onchange="doOperation()">
                <option value="default"> Start..</option>
                  <div id="action1" class="action1">
                    <option value="1"> 1</option>
                    <option value="2"> 2</option>
                    <option value="3"> 3 </option>
                  </div>
                  <div id="action2" class="action2">
                    <option value="4"> 4 </option>
                  </div>
                  <option value="5"> 5 </option>
              </select>
 </BODY>
</HTML>

单击某个按钮时，我想隐藏 ID 为“action1”的选项，并显示 ID 为“action2”的选项。所以我尝试了这个

  $('#action1').hide();
  $('#action2').show();

但这不起作用。没有得到什么问题？在萤火虫中，当我试图检查选择框时，我没有找到任何 div 标签（即带有 ids action1/action2 ) 以上选项。

【问题讨论】：

你不能在select和option标签内写div标签。
您可能希望使用 span 选项卡，因为该标签是内联的。

标签： javascript jquery html drop-down-menu

【解决方案1】：

使用下面的 javascript 函数，其中 showOptionsClass 是赋予您要显示的每个选项的类。这会在跨浏览器中工作。

function showHideSelectOptions(showOptionsClass) {
    var optionsSelect = $('#selectId');
    optionsSelect.find('option').map(function() {
        return $(this).parent('span').length == 0 ? this : null;
    }).wrap('<span>').attr('selected', false).hide();

    optionsSelect.find('option.' + showOptionsClass).unwrap().show()
        .first().attr('selected', 'selected');
  }

【讨论】：

@M Sach：我尝试将您的解决方案应用于我的问题 (stackoverflow.com/questions/20381003/…)。它在 IE 10 和 Chrome 上不起作用，同时在 Firefox 上它只有在我刷新页面并且我可以在第一时间看到所有选项时才起作用。我希望有唯一的“选择...”选项，当用户从第一个选择中选择一个值时，只显示相应的选项和选择的“选择...”选项

【解决方案2】：

你可以试试这个代码：

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $('.action1').wrap('<span></span>').hide();
  });
  $("#show").click(function(){
     $('.action1').unwrap('<span></span>').show();
  });
});
</script>
</head>
<body>
<select id="customerIds" onchange="doOperation()">
          <option value="default"> Start..</option>              
          <option value="1" class="action1"> 1</option>
          <option value="2" class="action1"> 2</option>
          <option value="3" class="action1"> 3 </option>
          <option value="4" class="action2"> 4 </option>
          <option value="5" class="action3"> 5 </option>
    </select>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>

【讨论】：

【解决方案3】：

<select> 中可能没有 <div> 元素，例如，参见 this stackoverflow on the topic，它引用了 HTML 规范的 this bit。

此外，隐藏选项不是跨浏览器兼容的（请参阅this stackoverflow (second answer))，正如@Voitek Zylinski 建议的那样，您最好保留选择的多个副本并在它们之间切换，或者保留id 属性是必需的，然后甚至可能调整 innerHtml (yuck...)。

你可以这样处理它：

标记

<select onchange="doOperation()" class="js-opt-a">
        <option value="default"> Start..</option>
            <option value="1"> 1</option>
            <option value="2"> 2</option>
            <option value="3"> 3 </option>
</select>
<select onchange="doOperation()" class="js-opt-b">
    <option value="default">Start...</option>
    <option value="4"> 4 </option>
    <option value="5"> 5 </option>
</select>

js

function doOperation() { /*whatever*/}
$(".js-opt-a").hide();
$(".js-opt-b").show();

例如见this jsfiddle

虽然不完全理想！

【讨论】：

【解决方案4】：

您不能使用div 进行分组，但可以将class 分配给options 进行分组。

Live Demo

<select id="customerIds" onchange="doOperation()">
      <option value="default"> Start..</option>              
      <option value="1" class="action1"> 1</option>
      <option value="2" class="action1"> 2</option>
      <option value="3" class="action1"> 3 </option>
      <option value="4" class="action2"> 4 </option>
      <option value="5" class="action3"> 5 </option>
</select>

$('.action1').hide();
$('.action2').show();

【讨论】：

这似乎没有将它们隐藏在我的机器上（os x/chrome 23）？
呵呵，隐藏选项不是跨浏览器 (learn something new everyday)
@Kieran 这似乎是真的。它适用于 Firefox，但不适用于 IE 8

【解决方案5】：

您不能在 div 中对选项进行分组。您可以将它们分组到 optgroup> 中，但我认为这不是您的目标。

您应该做的是创建两个下拉菜单供您切换，或者保留一个下拉菜单并重新填充其选项。

【讨论】：