隐藏/显示jquery中的选择框选项

Hiding/showing the select box options in jquery?

本文关键字：选择 选项 显示 jquery 隐藏      更新时间：2023-09-26

我有下面的代码片段在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();

但这不起作用。不明白有什么问题?在firebug，当我试图检查选择框，我没有找到任何div标签(即与id action1/action2)以上选项

使用下面的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');
  }

您可以在<select>中没有<div>元素，例如参见主题上的这个stackoverflow，它引用了HTML规范的这一点。

进一步，隐藏选项是不跨浏览器兼容(见这个stackoverflow(第二个答案))，作为@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();​​

参见以下示例:

虽然不完全理想!

不能使用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();​

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

你应该做的是，要么创建两个下拉菜单，你可以在其中切换，或者保留一个下拉菜单，并重新填充它的选项

你可以试试下面的代码:

<!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>
相关文章：