Question

大家好我在用户选择一个选项时尝试做的，会出现另一个选项。是的，我做到了，但是当用户选择其他选项时，我想显示文字，但它不起作用，这是我的代码：

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

Answer 1

你需要使用jQuery的on()函数，因为你想将eventhandler添加到第二个select中，它会动态地添加到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");
        }
    });

});

请参阅DEMO。

我用div包装你的元素并将更改处理程序附加到它。

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

Answer 2

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

如何为多个选择选项使用嵌套if？

2 个答案: