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

しかし、それはうまくいきませんでした。何が問題なのですか? 選択ボックスを調べようとしたときにfirebugで、オプションの上にdivタグ(つまり、idが 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

<div>内に要素がない場合があります<select>。たとえば、トピック のこのスタックオーバーフローを参照してください。これは、HTML 仕様のこのビットを参照しています。

さらに、オプションを非表示にすることはブラウザー間の互換性がありません (このスタックオーバーフロー (2 番目の回答) を参照)を参照して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割り当てることができます。classoptions

ライブデモ

<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 > 内でグループ化できますが、それはあなたが目指しているものではないと思います。

代わりにすべきことは、切り替える 2 つのドロップダウンを作成するか、1 つのドロップダウンを保持してそのオプションを再設定することです。

于 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 に答える