Question

我创建了一个包含菜单和子菜单的表单。我从数据库加载菜单下拉列表，但我面临的问题是使用ajax，json和codeigniter从数据库加载子菜单请解决我的问题..提前感谢...

这是我的视图编码

<form action="" method="post" id="frm_submenu">
               <div class="form-group">
               <label for="menu">Select Menu</label>
                   <select class="form-control" id="selectmenuid">
                    <option value="">-- Select Menu --</option>
                    <?php foreach($showData as $show):?>
                      <option value="<?php echo $show->menu_id?>"><?php echo $show->menu_name?></option>
                    <?php endforeach;?>
                    </select>
                </div>
               <div class="form-group">
               <label for="menu">Select Sub Menu</label>
                   <select class="form-control" id="selectsubmenu">

                    </select>
               </div>
              <div class="form-group">
                  <label for="imagetitle">Image Title</label>
                  <input type="text" class="form-control" name="imagetitle" id="imagetitle" placeholder="Enter Image Title" required="required">
                </div>
              <div class="form-group">
              <label class="btn btn-default btn-file">
                Browse <input type="file" style="display: none;">
              </label>
              </div>
               <button type="submit" class="btn btn-primary" id="submit">Submit</button>
           </form>

这是我的ajax和jquery和json编码

$( "#selectmenuid" ).change(function() {
       var id = $('#selectmenuid').val();
          populate_submenu(id);
       });

function populate_submenu(id){
     $('#selectsubmenu').empty();
     $('#selectsubmenu').append("<option>Loading ....</option>");
     $.ajax({
         type: "POST",
         url : "<?php echo site_url('Admin_Creator/populate_submenu')?>/"+id,
         contentType:"application/json;charset=utf-8",
         dataType:'json',
         success:function(data){
         $('#selectsubmenu').empty();
         $('#selectsubmenu').append("<option>Select Sub Menu</option>");
         $.each(data,function(i,name){
             $('#selectsubmenu').append('<option value="'+data[i].submenu_id+'"'+data[name].submenu_name+'</option>');
         });
       }
     });
}

这是我的控制器编码

public function populate_submenu($id){
        $smid=$id;
        $data['query']= $this->db->select("select * from submenu where menu_id='$smid'");
        echo json_encode($data);        

 }

Answer 1

使用附加功能构建item html时出错。请改用：

$.each(data,function(key,value){
    $('#selectsubmenu').append('<option value="'+value.submenu_id+'">'+value.submenu_name+'</option>');
});

Answer 2

第一次观看时遇到一些问题。首先，您的$smid变量应该是双引号或相应地转义。单引号中的变量按其外观进行处理，因此您的php代码应如下所示：

public function populate_submenu($id){
        $smid=$id;
        $data['query']= $this->db->select('select * from submenu where menu_id="$smid"');
        echo json_encode($data);        

 }

在您的JS代码中，您没有从>方法中的起始开放<option>标记中关闭each()并导致submenu_name错误，您应该通过索引，所以：

$('#selectsubmenu').append('<option value="' + data[i].submenu_id + '"' + data[name].submenu_name + '</option>');

应该是：

$('#selectsubmenu').append('<option value="' + data[i].submenu_id + '">' + data[i].submenu_name + '</option>');

代码应为：

$("#selectmenuid").change(function() {
  var id = $('#selectmenuid').val();
  populate_submenu(id);
});

function populate_submenu(id) {
  $('#selectsubmenu').empty();
  $('#selectsubmenu').append("<option>Loading ....</option>");
  $.ajax({
    type: "POST",
    url: "<?php echo site_url('Admin_Creator/populate_submenu')?>/" + id,
    contentType: "application/json;charset=utf-8",
    dataType: 'json',
    success: function(data) {
      $('#selectsubmenu').empty();
      $('#selectsubmenu').append("<option>Select Sub Menu</option>");
      $.each(data, function(i, name) {
        $('#selectsubmenu').append('<option value="' + data[i].submenu_id + '">' + data[i].submenu_name + '</option>');
      });
    }
  });
}

使用jQuery，JSON和AJAX，codeigniter填充子菜单下拉列表

2 个答案: