php - 使用jquery在选择选项中循环层次结构

Question

我想使用数据库中的数据作为选项在选择选项中进行循环。我的数据是一种分层数据。因此，如果我选择其中一个选项，它将在数据库中搜索所选选项的值（搜索具有 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();
}

标签： phpjquerycodeigniterloopingselector

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>