时间戳

首页 > 解决方案 > 使用 Java 脚本的 Dependent Dropdown 仅适用于更改主下拉列表，如果已选择主下拉列表，它必须在页面加载时工作

javascript - 使用 Java 脚本的 Dependent Dropdown 仅适用于更改主下拉列表，如果已选择主下拉列表，它必须在页面加载时工作

问题描述

我有一个 Primary 下拉列表（Country）和第二个dependent dropdown。（状态）。仅当我们选择 primary 时，此代码才能正常工作dropdown。但如果在页面加载时已经选择了主要下拉菜单，则不起作用。

主要下拉国家：

<select class="select4" name="country" id="country">
  <option value="">Please Select</option>
     @foreach($country_data as $country)
       <option value="{{$country->country_id}}" {{$profile_data->country == $country->country_id  ? 'selected' : ''}}>{{$country->country_name}}</option>
     @endforeach
</select>

依赖下拉状态：

<select class="select4" name="state" id="state">
  <option value="">Please Select</option>
      @foreach($state_data as $state)
         <option value="{{$state->state_id}}" {{$profile_data->state == $state->state_id  ? 'selected' : ''}}>{{$state->state_name}}</option>
      @endforeach
</select>

Java Script 代码填充依赖dropdown。

<script type="text/javascript">
 $(document).ready(function() {
   $('select[name="country"]').on('change', function() {
     var countryID = $(this).val();
        if(countryID) {
            $.ajax({
                url: 'family/state/'+countryID,
                type: "GET",
                dataType: "json",
                success:function(data) {
                    $('select[name="state"]').empty();
                    $.each(data, function(key, value) {
                        $('select[name="state"]').append('<option value="'+ value.state_id +'">'+ value.state_name +'</option>');
                    });

                }
            });
        }else{
            $('select[name="state"]').empty();
        }
    });
});

Ajax 代码在页面加载时也必须如何工作？

标签： javascriptjqueryajaxlaravel

解决方案

您将需要手动触发更改事件。

在你之后：

$('select[name="country"]').on('change', function() { ... }

强制触发： 

$('select[name="country"]').trigger('change');

这样，当您的 document.ready 函数即将结束时，您可以强制触发事件，如果它设置了，它将触发 ajax 调用

推荐阅读