如何创建动态下拉列表和更改事件？

Question

如何使用jQuery动态创建2个下拉列表并更改事件？

<script type="text/javascript">
    var counter = 0;
    $("button").click(function() {
        $("#div2").append("<select id='pincode' class='pincode' name='my_select_name'><option value='1'>1</option><option value='2'>2</option></select> <select id='pincode1' name='my_select_name1' class='pincode1'><option value='1'>1</option><option value='2'>2</option></select><br/>")
    });

    $(document).on("click", ".pincode", function(){
        $('.pincode1').empty(); // alert($(this).text());
    });
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="div1">
    <div id="div2"></div>
</div>
<button>generate new element</button>

编辑：我为执行此任务添加了div和公共类名。

Answer 1

您可以使用解决方案https://jsfiddle.net/woghjyd5/

var counter = 0;

$("button").click(function() {
    $("#div2").append("<select class='pincode' name='my_select_name'><option value='1'>1</option><option value='2'>2</option></select> <select name='my_select_name1' class='pincode1'><option value='1'>1</option><option value='2'>2</option></select><br/>")
});



$(document).on("click", ".pincode", function(){
  $($(this).next()).empty();
});

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

我想这就是你要找的东西。