Question

我需要根据父下拉列表中的选定值将数据动态加载到两个子下拉列表中。同时，子下拉框应允许选择多个选项。例如，如果我选择值1，则应将数据加载到一个子下拉列表中。如果我选择值2，则应加载其他子项下拉菜单。如果我选择值3，则两个子下拉菜单都应加载数据。我成功了。但是问题是当我在select标记中使用具有多个属性的selectpicker时，上述机制有效，但未在子下拉列表中显示数据。我不知道那里是什么问题。我的html代码在下面

            <div class="form-group row">
                  <label class="col-sm-4" for="sel4">Designation:</label>
                   <select name="designation" id="designation" class="form-control col-sm-5">
                    <option value="">Select</option>
                   @foreach($type as $items)
                    <option value="{{$items->id}}">{{$items->type}}</option>
                    @endforeach
                  </select>
                </div>

                <div class="form-group row">
                  <label class="col-sm-4">Registrar Division:</label>

                  <label class="col-sm-4">Birth and Death Division:</label>
                  <select name="birth_death_div[]" multiple id="birth_death_div" class="form-control col-sm-4 selectpicker">
                    <option value="">Select a Birth and Death Division</option>

                  </select>
                   <label class="col-sm-4"></label>
                  <label class="col-sm-4 mt-2">Marriage Division:</label>
                  <select name="marriage_div[]" multiple id="marriage_div" class="form-control col-sm-4 mt-2 selectpicker">
                    <option value="">Select a Marriage Division</option>

                  </select>

                </div>

第一个下拉列表是父级。

以下是JavaScript代码

$('#designation').change(function(){
      var desig_type = $(this).val();
      var ds= $('#ds').val();
      var _token = $('input[name="_token"]').val();

      $.ajax({
          url:"{{ route('addregistrar.fetchdiv') }}",
          method:"POST",
          data:{desig_type:desig_type, ds:ds, _token:_token},

          success:function(data){

             data = JSON.parse(data);

            if(data.division_type=="1"){
              $('#marriage_div').html(data.output);
              $('#birth_death_div').html('');
            }

           if(data.division_type=="2"){
              $('#birth_death_div').html(data.output);
              $('#marriage_div').html('');
           }

           if(data.division_type=="3"){
              $('#marriage_div').html(data.output_m);
              $('#birth_death_div').html(data.output_bd);
           } 

          }
       })

   });

控制器代码

         $data_m = DB::table('registrar_division') //get marriage divisions
               ->where('divisional_secretariat_id', $ds)
               ->where('div_type',$marriage_div)
               ->get();

                 $output_m = '<option value="">Select a Division</option>';
                 foreach($data_m as $row_m)
                 {

                  $output_m .= '<option value="'.$row_m->$id.'">'.$row_m->$name.'</option>';

                 }

output，output_bd也与output_m

数据正确传递给子下拉列表。但不显示任何数据。我的控制器代码很长，并且工作正常。添加selectpicker类以选择标签时发生问题。任何帮助将不胜感激。

动态下拉菜单，同时为子下拉菜单选择多个选项

0 个答案: