如何在laravel中的多选上加载依赖下拉列表

时间:2018-07-04 03:26:31

标签: javascript php jquery ajax laravel

我想在laravel中的multiselect上加载依赖的dropdwon。如何加载?现在我有单选来加载dropdown.below是我的代码,我想在laravel中的multiselect上加载依赖的dropdwon。我如何加载?现在我选择加载下拉菜单。以下是我的代码

<select class="form-control"  id="region_country_id" name="region_country_id" >
    <?php foreach ($countries as $key => $value) { ?>
    <option value="<?php echo $value->id; ?>"<?php if($product->region_country_id == $value->id){ echo "selected";} ?>>
        <?php echo $value->name;?>
    </option>
    <?php } ?>
</select>

 <select class="form-control" id="region_id" name="region_id" style="margin-top: 10px;" >
     <?php if(Session::get('branch_access') != 1)
     {?>
      <option value="">All region</option>
      <?php } ?>
      <?php foreach ($regions as $key => $value)  { ?>
      <option value="<?php echo $value->id; ?>" <?php if($value->id == $product->region_id) { echo "selected";} ?>><?php echo $value->region; ?>
      </option>
      <?php  } ?>
 </select>

下面是上面的脚本

$('body').on('change', '#region_country_id', function() {
    loadOptionRegion($(this).val());
});

function loadOptionRegion(countryID) {
    $.ajax({
        method: "POST",
        url: "/region/country",
        dataType: 'json',
        data: {
            'country_id': countryID
        },
        beforeSend: function() {},
        success: function(data) {
            console.log(data.data.region);
            var regionList = data.data.region;
            var str = '<option value="0">All Region</option>';
            $.each(regionList, function(index, value) {
                str = str + "<option value='" + value.id + "'>" + value.region + "</option>";
                console.log(str);
            });
            $("#region_id").html(str);

        }
    })
}

2 个答案:

答案 0 :(得分:0)

{!! Form::label("Department") !!}
 <select id="depId" class="form-control" name="depId">
      <option value="">--- Select Department ---</option>
           @foreach ($departments as $key => $value)
               <option value="{{ $key }}">{{ $value }}</option>
           @endforeach
</select>     
{!! Form::label("Sub Office") !!}
 <select id="sub_office_id" class="form-control" name="sub_office_id">
         <option value="">--- Select Sub Offices ---</option>
 </select>

//并且javascript是

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>$("#depId").change(function()  {
        depId = $(this).val();
        if(depId) {
            $.ajax({

                url: "{{ route('userform') }}",
                type: "GET",
                data: {id:depId},
                dataType: "json",
                success:function(data) {

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

                }
            });

        }else{
            $("#sub_office_id").empty();
        }
    });</script>

//和ajax的路由是

  Route::get('userform',array('as'=>'userform','uses'=>'Admin\UserController@userformAjax'));

//和ajax的控制器方法是

 public function userformAjax(Request $request)
{
    $data = $request->id;

    $suboffices = $this->suboffice
        ->where("depId",$data)
        ->lists("subOffice","id");

    return json_encode($suboffices);

}

///这里我们使用魔术方法将ID发送给控制器

///在这里,我为总部设有适当的子办事处,因此您可以更改代码以获取某个国家/地区的地区 并通过直接在网址中输入ajax的路由并更正ajax中的错误来确保ajax是否正常工作。

答案 1 :(得分:0)

非常首先在选择框中添加multiple

<select class="form-control"  id="region_country_id" name="region_country_id" multiple>

现在,在您的控制器中,将查询从where更改为whereIn国家/地区ID

发件人:

->where('country_id',$countryId);

收件人:

->whereIn('country_id',$arrOfCountryID);