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电话

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

你可以选择几种选择。

如果您在页面小部件中加载区域，希望您在后端区域和状态之间存在某种关系，那么假设region belongsTo state和state具有属性{{1}我们的例子

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

data attributes

然后，当您从<div class="hidden-regions" style="display:none;"> @foreach($regions as $region) <div data-state="{{$region->state->name}}" data-region="{{$region->name}}"></div> @endforeach </div>下拉菜单中选择一个选项时，您可以使用jQuery填充select下拉列表。

state

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

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

3 个答案: