jquery - 带有jquery的下拉更改功能

Question

我有 3 选择（下拉）。

让第一个下拉菜单，第二个下拉菜单和第三个下拉菜单。我使用 jquery 更改功能。当我更改第一个下拉菜单时，会出现第二个下拉菜单。我更改了第二个下拉菜单。但没有出现第三个下拉菜单。我不知道哪里错了。请帮助我。

html:

 <div class='select'>
  <select class='myFirstDropdown' name='first'>
   <option value='1'>1
   <option value='2'>2
   <option value='3'>3
  </select>
 </div>

JS：

$('.myFirstDropdown').change(function(){
//var result= $(this).val();
    $('.select').append("<select class='secondDropdown' name='second'><option value='second1'>second1<option value='second2'>Second2</select>");
});
$('.secondDropdown').change(function(){
$('.select').append("<select class='thirdDropdown' name='third'><option value='second1'>second1<option value='second2'>Second2</select>");
});

Answer 1

试试这个：样品

$('.myFirstDropdown').change(function(){
    $('.select').append("<select class='secondDropdown' name='second'><option value='second1'>second1<option value='second2'>Second2</select>");
});

$('.select').on('change', '.secondDropdown', function(){
    $('.select').append("<select class='thirdDropdown' name='third'><option value='second1'>second1<option value='second2'>Second2</select>");
});

您的第二个选择框是动态添加的，因此应该使用on()附加事件...