当使用jQuery或javascript更改另一个下拉列值时，如何更改下拉列表集合

Question

我想改变城镇下拉值当城市下拉选择值变化时，每个城市都有一些城镇限制它，我有一个数据库包含两个表城市表和城镇表，每个城镇都与它所属的城市有关系通过城镇表中的外键。我已将所有的城镇和城镇从控制器传递到视野。

Cities表

id - name

Towns表

id - name - cityId --> (foreign key refering to id in Cities table)

控制器功能

public function create()
{
    $cities = City::all();
    $towns = Town::all();

    return view('userAnnouncements.createAnnouncement')->with(['cities' => $cities, 'towns' => $towns]);
}

查看

              <div class="form-group">
                    <div class="row" dir="rtl">
                        <div class="col-md-11">
                            {{ Form::label("المحافظة","المحافظة") }} 
                        </div>
                    </div>
                    <div class="row" dir="rtl">
                        <div class="col-md-10">
                            @php
                                $citiesNames = array();
                                $townsNames = array();
                                foreach($cities as $city){ 
                                    $citiesNames[] = $city->name; 
                                }
                            @endphp
                            {{ Form::select('city', $citiesNames, null, ['class' => 'target', 'placeholder' => 'أختر المحافظة']) }}

                        </div>
                    </div>
                </div>
                <br>
                <div class="form-group">
                    <div class="row" dir="rtl">
                        <div class="col-md-11">
                            {{ Form::label("المدينة","المدينة") }}  
                        </div>
                    </div>
                    <div class="row" dir="rtl">
                        <div class="col-md-10">
                            {{ Form::select('town', $townsNames, null, ['class' => 'townDropdown', 'placeholder' => 'أختر مدينة']) }}
                        </div>
                    </div>
                </div>

我正在使用Laravel 5.6，有什么帮助吗？