Question

我目前通过javascript代码生成一些html（select），我想检索我的select的值，以显示另一个div，具体取决于值

$("#" + id).append(
'<select id="dropDownRole" form="dropDownRole">' +
'<option value="none">---</option>' +
'<option value="root">root</option>' +
'<option value="customer">customer</option>' +
'</select>' +
'<br>'+

这段代码在javascript函数里面，我想抓住dropDownRole的变化来使用它

我知道有一些关于它的主题，但没有通过javascript创建的html，如果我应该更改它

谢谢并安全飞行o /

Answer 1

您必须使用 event delegation 将事件绑定到此新元素，

$("#" + id).on('change', '#dropDownRole', function(){
    // do your stuff here.
});

委派事件的优势在于，他们可以处理来自稍后添加到文档的后代元素的事件。通过选择附加委托事件处理程序时保证存在的元素，您可以使用委派事件来避免频繁附加和删除事件处理程序。

Answer 2

试试这个会对你有帮助，你需要使用onchange事件来获取你所选择的值的变化

var id = "div1"
$("#" + id).append(
  '<select id="dropDownRole">' +
  '<option value="none">---</option>' +
  '<option value="root">root</option>' +
  '<option value="customer">customer</option>' +
  '</select>' +
  '<br>');
$("#" + id).on('change', '#dropDownRole', function() {
  $("#div2").text($('#dropDownRole').val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1"></div>
<div id="div2"></div>

检索选择＆＃34;的变化值＆＃34;在javascript中生成

2 个答案: