0

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

我使用框中的选择作为通过 AJAX 调用生成第二个的方法。这一切都很好，我正在使用 JQuery on change 事件处理程序来监听选择并运行 AJAX。但是，由于 on change 处理程序附加到由 DOM 中较高的 ie 生成第二个列表的下拉列表 - 每次第二个列表也更改时，它会自行重置（因为 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>
4

1 回答 1

1

似乎正在发生这种情况，因为您已将change事件与subjectselection表绑定。更改选择框的值时调用ajax#topic1很好。但是，当您的subjectselection表与change事件绑定时，当您更改表内任何元素的值时，ajax 会被触发subjectselection。这就是为什么当您更改新添加的选择框的值时，会检测到整个表的更改，这会导致您的问题。

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

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

于 2013-05-27T12:53:04.707 回答