使用依赖下拉列表时在数据库上存储 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

使用依赖下拉列表时在数据库上存储 ID，而不是名称 - Laravel/JS

Storing ID, not Name on DB when using Dependent Dropdown - Laravel/JS

javascript

jquery

laravel-6