使用jquery循环选择选项中的层次结构

Question

我想在select选项中使用数据库中的数据作为选项进行循环。我的数据属于分层数据。因此，如果我选择其中一个选项，它将在数据库中搜索所选选项的值(搜索parentID=所选值的数据，然后再次显示选择选项(，直到数据库中没有数据与其搜索相匹配。我试过这个，但如果选择的选项和我在数据中的级别一样多，它太长了。如有任何帮助，将不胜感激

谢谢：(

<select class="form-control" name="chs-org" id="chs-org" style="width:80%"  required="required">
<option default>Select Organization</option>
<?php foreach ($org as $org) { ?>
<option value="<?php echo $org['ID'];?>"><?php echo $org['Name'];?></option>
<?php } ?>
</select>
<select class="form-control" name="chs-dep" id="chs-dep" style="width:80%;display: none"  required="required">
<option default>Select</option>
</select>
<br>
<div id = "loop0"></div>
<div id = "loop1"></div>
<div id = "loop2"></div>
<div id = "loop3"></div>
<div id = "loop4"></div>
<script>
$('#chs-org').on('change',function(){
var id=$('#chs-org').val();
console.log(id);
$.ajax({
url:"<?php echo base_url('Hire_4/chs_dep');?>",
type:"POST",
dataType:"json",
data:{'ID': id},
success:function(data){
console.log(data);
// console.log(data[0]['Name']);
if (data) {
$('#chs-dep').show();
var output = [];
$.each(data, function(key, value){
output.push('<option value="'+data[key]['ID'] +'">'+data[key]['Name']+'</option>');
});
$('#chs-dep').html(output.join(''));      
}
},
error:function(){
alert('error ... ');
}
});
});
$('#chs-dep').on('change',function(){ 
var new_id;
var id=$('#chs-dep').val();
id = new_id;
console.log(id);
while(id != ''){
$.ajax({
url:"<?php echo base_url('Hire_4/chs_dep');?>",
type:"POST",
dataType:"json",
data:{'ID': id},
success:function(data){
console.log(data);
if(data) {
new_id= 0;
console.log(data.length);
var output = [];
output.push('<select name= "chs-div'+(i+1)+'" id="chs-div'+(i+1)+'" class="form-control" style="width:80%;">');
output.push('<option default>Select</option>');
$.each(data, function(key, value){
output.push('<option value="'+data[key]['ID'] +'">'+data[key]['Name']+'</option>');
});
output.push('</select>');
output.push('<br>');
$('#loop'+i).html(output.join(''));
var new_id2 = $("#chs-div"+(i+1)).val();
console.log(new_id2);
new_id = new_id2;
id= new_id2;
$("#chs-div"+(i+1)).on('change',function(){ 
i=c;
// console.log(id);
//console.log(dt);
//loop();
});
i++;
}
},
error:function(){
alert('error ... ');
}
}); 
}
}); 
</script>

我的控制器

function chs_dep(){
$ID = $this->input->post('ID');
$where = array('ParentID'=>$ID);
$data = $this->Hire4_model->chs_dep($where);
echo json_encode($data);
}

我的型号

public function chs_dep($ID){
$this->db->select('ID,Name');
$this->db->from('dbo.OrganizationTable');
$this->db->where($ID);
$query = $this->db->get();
return $query->result_array();
}

Answer 1

您可以只使用一个change event。我在你的代码中更改了很多。

代码

<div id="chs-container">
<!-- chs-div Template -->
<select class="form-control chs-select" id="chs-div-template" style="width:80%; display: none">
<option default>Select</option>
</select>
<select class="form-control chs-select" name="chs-org" id="chs-org" style="width:80%" required="required">
<option default>Select Organization</option>
<?php foreach ($org as $org) { ?>
<option value="<?php echo $org['ID'];?>"><?php echo $org['Name'];?></option>
<?php } ?>
</select>
<select class="form-control chs-select" name="chs-dep" id="chs-dep" style="width:80%;display: none" required="required">
<option default>Select</option>
</select>
<br>
</div>
<script>
$('body').on('change', '.chs-select', function(){
// Get the id dynamically
//var id = $('#chs-org').val();
const id = $(this).val();
const select_id = $(this).attr('id');
console.log(id);
$.ajax({
url: "<?php echo base_url('Hire_4/chs_dep');?>",
type: "POST",
dataType: "json",
data: {
'ID': id
},
success: function (data) {
console.log(data);
// console.log(data[0]['Name']);
if (data) {
var output = '';
$.each(data, function (key, value) {
output += '<option value="' + data[key]['ID'] + '">' + data[key]['Name'] + '</option>';
});
if(select_id == 'chs-org'){
// Show the chs-dep
$('#chs-dep').show();
$('#chs-dep').html(output);
}else if(select_id == 'chs-dep'){
// Get the template
var new_chs_div = $('#chs-div-template').clone();
const chs_div_count = i + 1;
new_chs_div.attr('name', 'chs-div' + chs_div_count);
new_chs_div.attr('id', 'chs-div' + chs_div_count);
// Remove the none value.
// Just change it to your desire value.
new_chs_div.css('display', '');
new_chs_div.append(output);
//Insert next to the last of .chs-select
$('#chs-container').append(new_chs_div);
$('#chs-container').append('<br/>');
//$(new_chs_div).insertAfter('.chs-select');
//$('<br/>').insertAfter('.chs-select');
}else if(select_id.includes('chs-div')){
// Get the template
var new_chs_div = $('#chs-div-template').clone();
const chs_div_count = i + 1;
new_chs_div.attr('name', 'chs-div' + chs_div_count);
new_chs_div.attr('id', 'chs-div' + chs_div_count);
// Remove the none value.
// Just change it to your desire value.
new_chs_div.css('display', '');
new_chs_div.append(output);

//Insert next to the last of .chs-select
$('#chs-container').append(new_chs_div);
$('#chs-container').append('<br/>');
//$(new_chs_div).insertAfter('.chs-select');
//$('<br/>').insertAfter('.chs-select');
}
}
},
error: function () {
alert('error ... ');
}
});
});
</script>