4

我在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 ）。

4

5 回答 5

3

使用下面的 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');
  }
于 2013-01-04T11:47:13.357 回答
2

您可能在 a 中没有<div>元素<select>，例如，请参阅有关主题的这个 stackoverflow，它引用了 HTML 规范的这一位。

此外，隐藏选项不是跨浏览器兼容的（参见这个stackoverflow（第二个答案）），正如@Voitek Zylinski 建议的那样，您最好保留选择的多个副本并在它们之间切换，或者如果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

虽然不完全理想！

于 2013-01-03T06:52:21.087 回答
1

您不能使用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();​
于 2013-01-03T06:38:53.610 回答
0

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

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

于 2013-01-03T06:37:46.367 回答
0

你可以试试这段代码：

<!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>
于 2013-01-03T07:23:50.200 回答