Using jQuery, JSON and AJAX,codeigniter to populate a submenu drop down - php

Question

I have created a form with menu and submenu. I load the menu dropdown from database but i am facing the problem to load submenu from database using ajax,json and codeigniter pls solve my issue.. thanks in advance...
This is My view coding
<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>
This is my ajax and jquery and json coding
$( "#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>');
});
}
});
}
This is my controller coding
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

You had an error when structuring your item html with appends. Use this instead:
$.each(data,function(key,value){
$('#selectsubmenu').append('<option value="'+value.submenu_id+'">'+value.submenu_name+'</option>');
});

Answer 2

You have a few problems at a first view. First your $smid variable should be in double quotes or escaped corespondingly. Variables in single quotes are treated as they look so your php code should look like this:
public function populate_submenu($id){
$smid=$id;
$data['query']= $this->db->select('select * from submenu where menu_id="$smid"');
echo json_encode($data);
}
In your JS code you are not closing the > from the starting open <option> tag in the each() method and getting the submenu_name wrong, you should get it by the index, so:
$('#selectsubmenu').append('<option value="' + data[i].submenu_id + '"' + data[name].submenu_name + '</option>');
should be:
$('#selectsubmenu').append('<option value="' + data[i].submenu_id + '">' + data[i].submenu_name + '</option>');
The code should be:
$("#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>');
});
}
});
}