如何根據以前的下拉菜單中的選擇刪除動態添加的下拉菜單

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或表。

希望它可以幫助您的問題！