在Cascading下拉列表中失败,但首先使用jquery Ajax正常工作

时间:2014-07-16 12:00:07

标签: javascript php jquery ajax

我有一个下拉列表,列出了使用PHP and jQuery Ajax从数据库中提取的数据。

  1. 第一个下拉列表成功获取数据并在下拉列表中填充它。
  2. 第一个下拉列表的HTML:

    $(document).ready(function () {         
            $(function() {   
                $.ajax({
                    type: 'POST',
                    url: 'getGroupzBase.php', 
                    datatype: 'json',
                    success: function(data) {
                    // Call this function on success                
                        console.log(data);
                       var yourArray = JSON.parse(data);
                       console.log(yourArray);                                           
                        $.each(yourArray, function (index, yourArray) {                 
                            $('#builder_group').append($('<option/>', { 
                                value: yourArray.id,
                                text : yourArray.name, 
                            }));
    }); 
    },
    error: function() {
        displayDialogBox('Error', err.toString());
    }
    });              
    });
    

    下拉标记 -

    <select id="builder_group"></select>
    
    1. 第二个下拉菜单不适用于第一个下拉列表。我也必须使用jQuery Ajax作为第二个下拉列表 第二个下拉列表的 HTML:

        <script>
          $("#builder_group").change(function(){
              console.log("Hello 1");
              $('#Ivrmapping_groupZCode').find('option').remove().end(); //clear the city ddl
              var builder = $(this).find("option:selected").text();
              alert(builder);
              //do the ajax call
              $.ajax({
                  url:'getGroupzCode.php'
                  type:'GET',
                  data:{city:builder},
                  dataType:'json',
                  cache:false,
              success: function(data) {
                          // Call this function on success                
                              console.log(data);
                             var yourArray = JSON.parse(data);
                             console.log(yourArray);                                           
                              $.each(yourArray, function (index, yourArray) {                 
                              );
          }); 
          },
          error: function() {
              displayDialogBox('Error', err.toString());
          }
          }); 
      
              }); 
      
          });
      </script>
      
    2. 下拉标记 -

      <select name="Ivrmapping[groupZCode]" id="Ivrmapping_groupZCode">..
      </select>
      

      为什么第二个下拉列表不能首先使用。 我们可以在一个页面中有多个jQuery Ajax调用。

1 个答案:

答案 0 :(得分:1)

我认为括号有问题::试试这个:

$("#builder_group").change(function(){
        console.log("Hello 1");
        $('#Ivrmapping_groupZCode').find('option').remove().end(); //clear the city ddl
        var builder = $(this).find("option:selected").text();
        alert(builder);
        //do the ajax call
        $.ajax({
            url:'getGroupzCode.php'
            type:'GET',
            data:{city:builder},
            dataType:'json',
            cache:false,
        success: function(data) {
                    // Call this function on success                
                        console.log(data);
                       var yourArray = JSON.parse(data);
                       console.log(yourArray);                                           
                        $.each(yourArray, function (index, yourArray) {/* your plan*/});
    },
    error: function() {
        displayDialogBox('Error', err.toString());
    }
    }); 
    });

你应该使用firebug或chrome,这些错误会在控制台上清晰显示。尝试一下。