0

動的に作成された値オプションを使用してドロップダウン リストをトリガーするのに苦労しています。

                <label>Year Level Advisory: </label>
                <select id="org-subject-advisory-level" name="subject_level">

                </select>



                <label>Subjects: </label>
                <select id="subjects-list">

                </select>

jquery ajax:

function get_my_advisory(){

     $.ajax({                
            url:'func_students.php',
            type:'POST',
            dataType:'json',
            data:{'func_num':'4'},
            success: function (data){

               $.each(data, function(i, item) {
                   var options = "<option value="+data[i].sec_level+">"+data[i].sec_level+"</option>";

                     $('#org-subject-advisory-level').append(options);
                   }); 

          }
    });
  }
get_my_advisory();


$('#org-subject-advisory-level').on("change", function(){

    var advisory_year_level = $('#org-subject-advisory-level').val();

alert(advisory_year_level);
    $('#subjects-list').html("");

    $.ajax({
                    type:'POST',
                    url:'add_subject.php',
               dataType:'json',
                   data:{'func_numbr':'9','year_level':advisory_year_level},
                success:function (data){
                  $.each(data, function(i, item) {

                   html = "<option value="+data[i].subj_id+">"+data[i].subj_name+"</option>";

                     $('#subjects-list').append(html);
                   });
                }

                });



  });

  $('#org-subject-advisory-level').trigger("change");

トリガーは機能しますが、アラートで null 値を返します。なぜそうなるのか不思議です。あなたの助けを願っています。私はjqueryとphpの初心者です。前もって感謝します

4

3 に答える 3

0

上記のように、jQuery ajax の成功コールバックまたは完全なコールバック内で変更イベントをトリガーします。

ただし、変更イベントをトリガーする前に、デフォルトでオプションを選択してください。一部のブラウザでは最初に 1 つがデフォルトで選択されますが、一部のブラウザでは何も選択されず、null が返されます。そのため、任意のオプションを明示的に選択することをお勧めします。お気に入り

$('#org-subject-advisory-level').find('option:last').attr('selected',true);

さらに、ループ方法を変更し、jquery each の代わりにネイティブ for ループを使用することをお勧めします。次のようにコードを最適化することで、少し効率を上げることができます

 $.each(data, function(i, item) {

 html = "<option value="+data[i].subj_id+">"+data[i].subj_name+"</option>";

 $('#subjects-list').append(html);
 });

に

var html=[];
for(var i=0; i<data.length; i++){
html.push("<option value="+data[i].subj_id+">"+data[i].subj_name+"</option>");
}
$('#subjects-list').append(html.join(''));
于 2013-01-07T18:10:50.537 に答える
0

これは正常に動作するはずですが、オプションがロードされる前に最初の.trigger(一番下にあるもの) が実行されます。最初の ajax リクエストは、そのコードに到達する前に完了していない可能性があります。動く

$('#org-subject-advisory-level').trigger("change");

success:最初のajax呼び出しのコールバック内に<option>追加され、追加される最初の値がアラートされるものになるはずです。

于 2013-01-07T17:46:10.913 に答える
0

@Ohgodway がコメントで述べたように...ほとんどの場合、トリガーが呼び出される前に ajax 呼び出しは完了しないため、選択オプションが追加されたときに ajax 成功関数内でトリガー関数を呼び出します。

これを試して：

 $.ajax({                
        url:'func_students.php',
        type:'POST',
        dataType:'json',
        data:{'func_num':'4'},
        success: function (data){

           $.each(data, function(i, item) {
               var options = "<option value="+data[i].sec_level+">"+data[i].sec_level+"</option>";

                 $('#org-subject-advisory-level').append(options);
               }); 

         $('#org-subject-advisory-level').trigger("change");

      }
});
于 2013-01-07T17:46:16.497 に答える