当更改另一个选择框的值时，我们如何在一个选择框中填充值

Question

当我从名为State 的选择框中选择一个值时，我想在名为Region 的相应选择框中填充值。我该如何解决这个问题。

下面我给出了我的设计和代码。

<div class="form-group col-lg-4 col-md-4 col-xs-12{{ $errors->has('state') ? ' has-error' : '' }}">
    <div class="field-label">State <span class="required">*</span></div>
         {!! Form::select('state', $states, "",[]) !!}

             @if ($errors->has('state'))
                  <span class="help-block">
                  <strong>{{ $errors->first('state') }}</strong>
                  </span>
             @endif
    </div>
<!-- Region Selection  -->
<div class="form-group col-lg-4 col-md-4 col-xs-12{{ $errors->has('region') ? ' has-error' : '' }}">
    <div class="field-label">Region <span class="required">*</span></div>
         {!! Form::select('region', $regions, "",[]) !!}

             @if ($errors->has('region'))
                 <span class="help-block">
                 <strong>{{ $errors->first('region') }}</strong>
                 </span>
             @endif
     </div>

Answer 1

如果您在页面加载时拥有所有状态和区域，请使用以下代码。不需要ajax调用

$(document).ready(function(){
  $("#state").change(function(){
    $("#region .reg").hide();
    $("#region .state_"+$(this).val()).show();
    $("#region").val("");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="state">
  <option value="1">Kerala</option>
  <option value="2">Tamil Nadu</option>
  <option value="3">Karnataka</option>
</select>

<select id="region">
  <option value="">Select Region</option>
  <option value="1" class="reg state_1">Trivandrum</option>
  <option value="2" class="reg state_1">Kollam</option>
  <option value="3" class="reg state_2">Chennai</option>
  <option value="3" class="reg state_2">Coibathur</option>
  <option value="3" class="reg state_3">Banglure</option>
</select>

Answer 2

为此目的使用 Ajax。

<select name="state" id="state" onchange="bringRegion(this.value)">
...
...
...
</select>

<select id="region" name="region">

</select>


//Ajax part
<script>
   function bringRegion(selected)
   {
      $.ajax({
          type: "post",
          url: "your_route",
          data: "state="+selected,
          success: function(result)
          {
             $("#region").html(result);
          }
       });
   }
</script>

只需从您的控制器返回 options。

Answer 3

您有多种选择。

如果您在页面 lad 加载 Regions，希望您在后端的区域和状态之间有某种关系，假设 region belongsTo state 和 state 在我们的示例中有一个属性 name

p>

在这种情况下，您可以遍历所有区域并在hidden div 内使用data attributes。然后，当您选择状态时，您可以使用相应的data attributes 从这个hidden div 构建每个选项。像这样的：

<div class="hidden-regions" style="display:none;">
   @foreach($regions as $region)
       <div data-state="{{$region->state->name}}" data-region="{{$region->name}}"></div>
   @endforeach
</div>

然后，当您从state 下拉列表中选择一个选项时，您可以使用 jQuery 填充select 下拉列表。

$('select[name="state"]').on('change', function(){
    let $state = $(this);
    let $regionSelect = $('select[name="region"]');

    $regionSelect.empty(); // remove all options from the region

    // loop our hidden divs to find matching regions by state selected val
    $('.hidden-regions > div').each(function(){
        let $region = $(this);

        // if our data-state attribute matches the selected state value
        if ($region.data('state') === $state.val()) {
           $state.append('<option value="'+ $region.data('region') +'">'+ $region.data('region') +'</option>');
        }
    });

});

或者，您可以为此使用 ajax，因为我正在写它，有人发布了它。这里的优点是您不必仅仅为了获取区域而创建端点。这里的缺点是jQuery很烂，而且很乱。