javascript - onchange 选择(动态)下拉菜单

Question

我正在动态添加选择下拉列表和输入字段(当前已禁用)。我希望每当选择 Others 选项时，都应启用输入字段。这是我的代码:-

<div></div>
<button> Add</button>
</body>
<script type="text/javascript">
    $(function(){
        option_html = '<option value="Others">Others</option><option value="Others1">Others1</option>'
        input_html = '<input placeholder="Other, if any" class="form-control input-md others_input" type="text" disabled="disabled">'
        html = '<select class="form-control select_question" name="qa_">' + option_html + '</select>' + input_html
        $('button').on('click', function(){
            $("div").after(html);
        })

        $('select.select_question').on('change', function(){
            alert(111)
            $(this).closest(".others_input").prop('disabled', false);
        })
    })
</script>

我无法捕获 onchange 事件。 jsFiddle

Answer 1

您需要委托(delegate):

$("#container").on('change',".select_question",function(){
   $(this).next(".others_input").prop('disabled', this.value!="Others");
})

我希望它在加载时触发更改以立即启用其他内容

我使用 .html 而不是 .after，我确信这就是你的意思。 After 将在 div 后面添加 select，而不是在 div 内

$(function(){
  $("#container").on("change","select.select_question",function(){
    console.log(this.value)
    $(this).next(".others_input").prop('disabled', this.value!="Others");
  });

  option_html = '<option value="Others">Others</option><option value="Others1">Others1</option>'
  input_html = '<input placeholder="Other, if any" class="form-control input-md others_input" type="text" disabled="disabled">'
  html = '<select class="form-control select_question" name="qa_">' + option_html + '</select>' + input_html
  $('button').on('click', function(){
    $("#container").html(html);
    $("#container select.select_question").change();
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container"></div>
<button> Add</button>