1

ユーザーがオプションを選択すると、別のオプションが表示されます。はい、私はそれをしましたが、ユーザーが他のオプションを選択すると、テキストを表示したいのですが、ここでは機能しません私のコードです:

<html>
  <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script></script>
    <script type="text/javascript">
      $(document).ready(function() {

        $(".select-box").change(function() {
          if ($(".select-box option[value='3']").attr('selected')) {
           document.getElementById("demo").innerHTML="<select class='select-box'><option value='4'>a</option><option value='5'>b</option></select>";
          if ($(".select-box option[value='5']").attr('selected')) {
          document.write("Hello")
          }
          }

        }); 

      });
    </script>
  </head>
  <body>
    <select class="select-box">
      <option>Select an option</option>
      <option value="1">no alert</option>
      <option value="2">no alert too</option>
      <option value="3">alert</option>
    </select> 
    <p></br>
    <div id="demo"></div>

  </body>
</html>
4

2 に答える 2

3

on()DOM に動的に追加される 2 番目の選択に eventhandler を追加するため、jQuery の関数を使用する必要があります。

$(document).ready(function() {

    $('#main').on('change', '.select-box', function() {

        if ($(this).val() == 3) {
            $('#demo').html("<select class='select-box'><option value='4'>a</option><option value='5'>b</option></select>");
        }

        if ($(this).val() == 5) {
            alert("Hello");
        }
    });

});​

デモを参照してください。

要素を div でラップし、変更ハンドラを添付しました。

getElementByIdまた、javascriptを jQuery セレクターに置き換え、値のチェックを簡略化したことに注意してください。

于 2012-09-10T11:58:18.010 に答える
1

スクリプトが実行されている時点では、DOM マッチング セレクターに要素が 1 つしかないため、機能しません.select-box。したがって、2 つ目のリスナーを作成した後、イベント リスナーをもう一度バインドする必要があります。

于 2012-09-10T11:58:50.307 に答える