0

私は単純なことをしようとしていますが、それは複雑になっています: ユーザーはドロップダウン 1 から特定のオプションを選択します -> AJAX からの新しいドロップダウン (ドロップダウン 2) メニューが追加されます - ユーザーは気が変わり、ドロップダウン 1 から別のオプションを選択します -> ドロップダウン 2消えます。

AJAX 呼び出しを介して秒を生成する手段として、ボックス内の選択を使用しています。これはすべて正常に機能し、変更イベントハンドラーで JQuery を使用して選択をリッスンし、AJAX を実行しています。ただし、on change ハンドラーは DOM の上位にある ie によって 2 番目のリストを生成するドロップダウンにアタッチされているため、2 番目のリストも変更されるたびに (AJAX 呼び出しが再び発生するため) それ自体がリセットされ、ユーザーがその中から何かを選びます。

AJAX呼び出しでon changeイベントリスナーを削除することで機能させることができますが、これは、誰かが気が変わって最初のドロップダウンを変更すると、2番目のドロップダウンが非表示にならないことを意味します。これは簡単なはずですが、複雑になりすぎているように感じます。何かヒントはありますか?

$(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テーブルにバインドしているため、これが発生しているようです。#topic1selectboxの値を変更するときに ajax が呼び出されるのは問題ありません。ただし、subjectselectionテーブルがchangeイベントにバインドされているため、テーブル内にある要素の値を変更すると ajax が発生しsubjectselectionます。そのため、新しく追加された選択ボックスの値を変更すると、テーブル全体の変更が検出され、問題が発生します。

div またはテーブル全体ではなく、特定の要素(この場合は選択ボックス) をバインドしてみてください。

あなたの問題に役立つことを願っています!

于 2013-05-27T12:53:04.707 に答える