Question

我正在尝试做一些简单的事情并且变得越来越复杂：用户从下拉列表1中选择特定选项 - ＆gt;附加了AJAX的新下拉菜单（下拉菜单2） - 用户改变主意并从下拉列表1中选择不同的选项 - ＆gt;下拉2消失。

我正在使用框中的选择作为通过AJAX调用生成第二个的方法。这一切都很好，我在更改事件处理程序上使用JQuery来监听选择并运行AJAX。但是，由于on change 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 选择框的值时，调用ajax很好。但是，当您的 subjectselection 表与change事件绑定时，当您更改 subjectselection内的任何元素值时，会触发ajax 表。这就是为什么当您更改新添加的选择框值时，会检测到整个表格的更改，从而导致您的问题。

尝试绑定特定元素（在这种情况下是您的选择框）而不是整个div或表。

希望它对您的问题有帮助！

如何根据先前下拉列表中的选择删除动态添加的下拉列表

1 个答案: