使用依賴下拉菜單時在數據庫上存儲 ID，而不是名稱 - Laravel/JS

Question

我正在使用依賴下拉列表 select。 我試圖從列表中獲取值名稱以存儲在我的數據庫中，但我只獲得索引（數字）。 如何解決這個問題？ 你能幫助我嗎？

我有這些代碼：

HTML

<div class="form-group col-md-4">
 <label for="state">State:</label>
  <select name="state"class="form-control state" id="state" onchange="ChangecatList()" required >
   <option selected>Select State...</option>
    @foreach($state as $k => $v)
   <option value="{{$k}}" name="$key">{{ $k }}</option>
    @endforeach
  </select>
</div>
<div class="form-group col-md-4">
 <label for="city">City/ City:</label>
  <select class="form-control city" id="city" placeholder="City"  name="city"></select>
</div>

JS

var catAndActs = {};

catAndActs['AC'] = ['City1','City2'];

function ChangecatList() {
    var catList = document.getElementById("state");
    var actList = document.getElementById("city");
    var selCat = catList.options[catList.selectedIndex].value;
    while (actList.options.length) {
        actList.remove(0);
    }
    var cats = catAndActs[selCat];
    if (cats) {
        var i;
        for (i = 0; i < cats.length; i++) {
            var cat = new Option(cats[i], i);
            actList.options.add(cat);
        }
    }
} 

我正在使用 Laravel 6 - 當我調試 -> dd($request) 時，它顯示我正在獲取索引。

LARAVEL

+request: Symfony\Component\HttpFoundation\ParameterBag {#52 ▼
    #parameters: array:14 [▼
      "_token" => "kYkq2DhQ7v5XPjY8Aql7gPu5uWnoDYIxRDQXGza2"
      "state" => "AC"
      "city" => "7" // <- here

Answer 1

只需將值作為第二個參數即可獲取城市為值，如下圖

var cat = new Option(cats[i], cats[i]);

您可能會發現此處記錄的構造函數https://developer.mozilla.org/en-US/docs/Web/API/HTMLOptionElement/Option