Question

我有级联下拉菜单，如下所示。我在第二次和第三次下拉列表中动态列出选择。虽然第一个改变功能没有问题（我得到项目列表），第二个改变（$（＆＃34;＃pro＆＃34;）。on（＆＃39; change＆＃39;，function（e））根本没有意识到项目选择的任何变化.Chrome控制台显示没有问题。可能是什么问题？

<div class="form-group">
  <label for="projectfamily">Proje Grubu</label>
  <select class="form-control" name="projectfamily" id="projectfam">
    <option value="">Seçiniz</option>
    @foreach($projectfamilies as $projectfamily)
    <option value= "{{$projectfamily->id}}">{{$projectfamily->projectfamily}}</option>
    @endforeach
  </select>
</div>

<div class="form-group">
  <label for="project">Proje Adı</label>
  <select class="form-control" name="project" id="pro">
    <option value= "" disabled></option>
  </select>
</div>

<div class="form-group">
  <label for="version">Versiyon</label>
  <select class="form-control" name="version" id="version">
    <option value="" disabled></option>
  </select>
</div>

JQuery的

$('#projectfam').on('change', function(e) {
    var projectfam = e.target.value;
    $.get('/ajax_projectfamily_post?projectfam=' + projectfam, function(data){
        $('#pro').empty();
        $('#version').empty();  
        $('#pro').append('<option value="' + '">' + "Seçiniz" + '</option>');

        $.each(data, function(i, deger){
            $('#pro').append('<option value="' + deger.id + '">' + deger.project + '</option>');
        });
    });
});

$("#pro").on('change', function(e) {
    var project = e.target.value;
    $.get('/ajax_project_post?project=' + project, function(data){
        $('#version').empty();
        $('#version').append('<option value="' + '">' + "Seçiniz" + '</option>'); 
        $.each(data, function(i, deger) {
            $('#version').append('<option value="' + deger.id + '">' + deger.version + '</option>');
        });
    });
});

Answer 1

它似乎在chrome中按预期工作。更换了ajax调用后，请查看此fiddle。这是ajax调用的问题吗？或许是一个html语法错误？检查整个HTML页面的有效性。由于您只发布了一个我无法进一步诊断的片段。

$('#projectfam').on('change', function(e) {
    var projectfam = e.target.value;
    var data = ['a', 'b', 'c'];

    $('#pro').empty();
    $('#version').empty();  
    $('#pro').append('<option value="' + '">' + "Seçiniz" + '</option>');

    $.each(data, function(i, deger){
        $('#pro').append('<option value="' + data[i] + '">' + data[i] + '</option>');
    });
});

$("#pro").on('change', function(e) {
    var project = e.target.value;
    var data = ['x', 'y', 'z'];
    $('#version').empty();
    $('#version').append('<option value="' + '">' + "Seçiniz" + '</option>'); 
    $.each(data, function(i, deger) {
        $('#version').append('<option value="' + data[i] + '">' + data[i] + '</option>');
    });
});

Answer 2

我会这样做，我之前遇到过类似的问题，在加载元素后需要分配onchange事件：

$('#projectfam').on('change', function(e) {
    var projectfam = e.target.value;
    $.get('/ajax_projectfamily_post?projectfam=' + projectfam, function(data){
        $('#pro').empty();
        $('#version').empty();  
        $('#pro').append('<option value="' + '">' + "Seçiniz" + '</option>');

       $.each(data, function(i, deger){
            $('#pro').append('<option value="' + deger.id + '">' + deger.project + '</option>');
       });
       addOnChangeThingy(); // load onclick functions
   });
});

function addOnChangeThingy(){
   $("#pro").on('change', function(e) {
      var project = e.target.value;
      $.get('/ajax_project_post?project=' + project, function(data){
          $('#version').empty();
          $('#version').append('<option value="' + '">' + "Seçiniz" + '</option>'); 
          $.each(data, function(i, deger) {
             $('#version').append('<option value="' + deger.id + '">' + deger.version + '</option>');
           });
       });
   });
 }

jQuery on（change）第二次不起作用

2 个答案: