隐藏/显示在jQuery中的选择框选项？

Question

我在jsp中有以下代码片段

<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的ID）。

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

Answer 2

你可能没有<div>中的元素一个<select> ，例如见这个计算器的话题 ，它引用此位 HTML规范的。

此外，隐藏选项与跨浏览器不兼容（请参阅此stackoverflow（第二个答案）） ，如@Voitek Zylinski所建议的，最好保留多个select副本并在它们之间切换，或者保持id属性为然后可能甚至需要调整innerHtml（糟糕...）。

您也许可以这样处理：

标记

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

例如，请参阅此jsfiddle

虽然不完全理想！

Answer 3

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

现场演示

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

Answer 4

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

相反，您应该创建两个可以在它们之间切换的下拉菜单，或者保留一个下拉菜单并重新填充其选项。

Answer 5

您可以尝试以下代码：

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