Question

我正在动态添加select下拉列表和输入字段（当前已禁用）。我希望每当选择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

您需要委派：

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

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

我使用.html而不是.after这是你的意思我肯定。之后将添加选择AF而不是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>

Answer 2

您使用closest的方式错误，因为input不是select的父级，而是紧挨着它。

此外，select元素是动态绑定的，因此您需要使用委托事件处理语法：

$(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);
  })

      $(document).on('change', 'select.select_question', function(){
            alert(111)
            $(this).next(".others_input").prop('disabled', !this.value=="Others");
        });
})

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

onchange选择（动态）下拉列表

2 个答案: