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

您需要使用 jQuery 的on()函数，因为您想将事件处理程序添加到第二个选择中，该选择是动态添加到 DOM 中的。

$(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 包装了您的元素，并将更改处理程序附加到它。

另请注意，我已将您的 javascript 替换getElementById为 jQuery 选择器，并且简化了您的值检查。

于 2012-09-10T11:58:18.010 回答
1

它不起作用，因为在脚本运行时，DOM 匹配选择器中只有一个元素.select-box。所以在创建第二个之后，你必须再绑定一次事件监听器。

于 2012-09-10T11:58:50.307 回答