如何基于先前下拉菜单的选择删除动态添加的下拉菜单?

Question

我想做一些简单的事情，它变得复杂:用户从下拉菜单1中选择一个特定的选项->从AJAX添加新的下拉菜单(下拉菜单2)-用户改变主意，选择一个不同的选项从下拉菜单1 ->下拉菜单2消失。

我使用框中的选择作为通过AJAX调用生成第二个选项的方法。这一切都很好，我使用JQuery的更改事件处理程序来监听选择并运行AJAX。然而，由于on change处理程序被附加到生成第二个列表的下拉列表中，在DOM中更高的位置——每次第二个列表也发生变化时，它会重置自己(当AJAX调用再次触发时)——并且不允许用户选择其中的某些内容。

我可以通过在AJAX调用中删除on change事件监听器来使其工作，但这意味着如果有人改变主意并改变第一个下拉框，那么第二个下拉框将不会被隐藏。这应该很简单，我觉得它变得过于复杂了——有人有什么建议吗?

$(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 selectbox的值时，调用ajax是很好的。但是，由于 subjectselection 表与change事件绑定，当您更改 subjectselection 表内的任何元素的值时，ajax将被触发。这就是为什么当您更改新添加的selectbox的值时，会检测到整个表的更改，从而导致您的问题。

尝试绑定特定的元素(在本例中是您的selectboxes)而不是整个div或表。

希望对你的问题有所帮助!