codeigniter - 在页面中使用jquery两次依赖下拉列表

时间:2016-06-07 08:31:54

标签: javascript php jquery codeigniter

我有这个功能相关的下拉列表,用于地址,这是我的代码,

            <select class="form-control" name = "PROV_ID" id = "PROV_ID">
              <option></option>
                <?php foreach ($content as $cs) {?>
                  <option value="<?php echo $cs->PROV_ID; ?>"><?php echo $cs->PROVINCE; ?></option>
                <?php } ?> 
            </select>

            <select class="form-control" name = 'CT_ID' id = 'CT_ID'>
                <option value="">-- Select Type --</option>
            </select>

jquery是

jQuery(document).ready(function(){
  $("#PROV_ID").change(function() {
    var PROVID = {"PROVID" : $('#PROV_ID').val()};
    console.log(PROVID);

    $.ajax({
      type: "POST",
      data: PROVID,
      url: "<?php base_url(); ?>Employees/dependent_dropdown",

      success: function(data){
          var select = $('#CT_ID');
          select.html('');
          $.each(data, function(i, option){
              select.append("<option value='"+option.CT_ID+"'>"+option.CITY+"</option>");
          });
      }
     });
   });
 });

现在我需要的是在我的表格中做另一个这样的,因为我需要它用于住宅和永久地址,我做了另一个这样的

            <select class="form-control" name = "PROV_ID2" id = "PROV_ID2">
              <option></option>
                <?php foreach ($content as $cs) {?>
                  <option value="<?php echo $cs->PROV_ID; ?>"><?php echo $cs->PROVINCE; ?></option>
                <?php } ?> 
            </select>

            <select class="form-control" name = 'CT_ID2' id = 'CT_ID2'>
                <option value="">-- Select Type --</option>
            </select>

,jquery是

jQuery(document).ready(function(){
  $("#PROV_ID2").change(function() {
    var PROVID2 = {"PROVID2" : $('#PROV_ID2').val()};
    console.log(PROVID2);

    $.ajax({
      type: "POST",
      data: PROVID2,
      url: "<?php base_url(); ?>Employees/dependent_dropdown",

      success: function(data){
          var select = $('#CT_ID2');
          select.html('');
          $.each(data, function(i2, option2){
              select.append("<option value='"+option2.CT_ID+"'>"+option2.CITY+"</option>");
          });
      }
     });
   });
 });

我不确定jquery bec。我不熟悉它,但我需要这个尽快完成。什么是错误?为什么第二个依赖下拉不起作用?感谢

1 个答案:

答案 0 :(得分:0)

尝试第二次下拉,首先尝试同样的事情

<select class="form-control" name = "PROV_ID2" id = "PROV_ID2" onchange="provchange()">
              <option></option>
                <?php foreach ($content as $cs) {?>
                  <option value="<?php echo $cs->PROV_ID; ?>"><?php echo $cs->PROVINCE; ?></option>
                <?php } ?> 
            </select>

            <select class="form-control" name = 'CT_ID2' id = 'CT_ID2'>
                <option value="">-- Select Type --</option>
            </select>

jquery js

function provchange(){
                      var PROV_ID2=$('#PROV_ID2').val();

                      $.ajax({
                         url: "<?php echo base_url('Employees/dependent_dropdown/')?>",
                         type: "post",
                         data : {
                            PROV_ID: PROVID2
                         },
                         success: function(data){
                            var json = JSON.parse(data);
                            //alert(data);
                            $("#CT_ID2").empty();
                            $("#CT_ID2").append($('<option></option>').attr('value', '').text(':: SELECT ::'));
                            ival=0;
                      for (var i in json) {
                         $("#CT_ID2").append($('<option></option>').attr('value', json[i].CT_ID).text(json[i].CITY));
                       }
                         }
                      });

             }