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

但这没有用。没有得到什么问题？当我试图检查选择框时，在firebug中，我没有找到任何div标签（即使用ids action1 / action2）选项。

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>个元素，例如参见this stackoverflow on the topic，其中引用了HTML规范的this bit。

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

你可以这样做：

<强>标记

id

<强> JS

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

参见例如this jsfiddle

虽然不完全理想！

Answer 3

您无法使用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();

Answer 4

您无法在div中对选项进行分组。您可以将它们分组到＆lt; optgroup ＆gt;中，但我认为这不是您的目标。

您应该做的是创建两个下拉列表，您可以在这两个下拉列表之间切换或保留一个下拉列表并重新填充其选项。

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>

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

5 个答案: