当使用Dependent Dropdown-Laravel/JS时，在DB上存储ID，而不是Name

Question

我正在使用依赖下拉选择。我试图从一个列表中获取值名称以存储在我的DB中，但我只得到了索引(数字(。如何解决这个问题？你能帮我吗？

我有这些代码：

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: SymfonyComponentHttpFoundationParameterBag {#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