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

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>