如何根据以前的下拉菜单中的选择删除动态添加的下拉菜单

Question

我正在尝试做一些简单的操作并使其变得复杂： 用户从下拉菜单中选择一个特定的选项1 - >新的下拉菜单（下拉菜单2）菜单从AJAX附加 - 用户改变主意，并从下拉菜单中选择一个不同的选项1 - >下拉菜单2消失。

我使用的是在一个盒子作为一种手段的选择产生第二通过AJAX调用的方式。这一切工作正常，我在改变事件处理程序上使用JQuery来监听选择并运行AJAX。然而，由于on change handler被附加到下拉列表中，该下拉列表通过在DOM中更高的位置生成第二个列表 - 每次第二个列表也发生更改时，它会自行重置（因为AJAX调用再次触发） - 并且不允许用户选择一些东西。

我可以把它通过消除AJAX调用上的变化事件监听器工作，但那么这意味着，如果有人改变了主意，改变了第一个下拉那么第二个将不被隐藏。这应该很容易，我觉得它变得过于复杂 - 有没有人有任何指示？

$(document).on('change', "table#subjectselection", myFunction); 
var counter = 1; //this is the counter to ensure unique IDs for dynamically added elements 
var appended = false; 
var options = []; 
function ajaxCheck(subject){ 
$.ajax({ 
    type: 'GET', 
    url: 'tutorprofileinput.php', 
    data: {"subject": subject}, 
    dataType:'json', 

success:function(data){ 
//this creates the new dropdown to be inserted 
var objData = data[0]; 
var id = objData.id; 
options +='<div class="select">' 
options +='<select class="language" name="language[]">'; 
options +='<option>Select Language</option>'; 
$.each(data, function (key, val) { 
    options += '<option value="' + val.topic + '">' + val.topic + '</option>'; 
     });  
      $('#more'+counter+'').show(); 
     $('#more'+counter+'').html(options); 
     $(document).off('change', "table#subjectselection", myFunction); 
     }); 
      }, 
    error:function(){ 
    // failed request; give feedback to user 
    $('#ajax-panel').html('<p class="error"><strong>Oops!</strong> Try that again in a few moments.</p>'); 
    } 
}); 
} 

function myFunction(){ 
//this function listens for the choice and passes it to the AJAX 
    var subject = $("select#topic"+counter+">option:selected").text(); 
//and changes the visibility based on the value of the selection 
    if (subject=="Languages"){ 
    ajaxCheck(subject);} 
    else if (subject != "Languages"){ 
    $('#more'+counter+'').hide(); 
     } 
} 

function Repeat(){ 
//this function adds another row with a new set of dropdowns which are to behave as the originals do 
counter++; 
$(document).on('change', "table#subjectselection", myFunction); 

var selecoptions = '<tr><td><div class="subjselect"><div class="select"><select id="level'+counter+'" name="level[]" form="tutor_profile_input"><option value="">Level Taught</option><option value="primary">Primary</option><option value="junior_high">Junior High</option><option value="senior_high">Senior High</option><option value="gcse">GCSE</option><option value="alevel">A Level</option><option value="sat">SAT</option><option value="GMAT">GMAT</option><option value="university">University</option><option value="all">All Levels</option></select></div></td><td><div class="select"><select id="topic'+counter+'" name="topic[]" form="tutor_profile_input"><option value="">Math</option><option value="">Biology</option><option value="">Chemistry</option><option value="">Physics</option><option value="">Languages</option><option value="">English Literature</option><option value="">Politics</option><option value="">Art</option><option value="">Latin</option><option value="">Psychology</option><option value="">Medicine</option><option value="">Anthropology</option></select></td><td id="more'+counter+'"></td></tr>'; 

$('table#subjectselection').append(selecoptions); 

}} 

和HTML：

<div id="subjectselectiondiv" style="width:inherit;"> 
<h4>Select up to three subjects that you are able to tutor</h4> 
<table id="subjectselection" > 
<tr> 

      <td> 
       <div class='select'> 
        <select id="topic1" class="topic" name="topic[]" form="tutor_profile_input"> 
        <option value="">Math</option> 
        <option value="">Biology</option> 
        <option value="">Chemistry</option> 
        <option value="">Physics</option> 
        <option value="">Languages</option> 
        <option value="">English Literature</option> 
        <option value="">Politics</option> 
        <option value="">Art</option> 
        <option value="">Latin</option> 
        <option value="">Psychology</option> 
        <option value="">Medicine</option> 
        <option value="">Anthropology</option> 
        </select></td> 
        <td id="more1"></td> 
      <td><a href="#" id="another" class="more" onclick="Repeat()">Add Another Subject</a> 
</td> 
      </tr>   
      </table> 
</div> 

Answer 1

好像发生这种情况，因为你已经绑定change事件与subjectselection表。当您更改#topic1选择框的值时，调用ajax很好。但是，由于subjectselection表绑定了change事件，所以当您更改任何元素的值时，ajax被触发，该值位于subjectselection表中。这就是为什么当您更改新添加的选择框的值时，会检测到整个表上的更改，从而导致您的问题。

尝试绑定特定元素（在本例中为您的选择框）而不是整个div或表。

希望它可以帮助您的问题！