<select> </select> 使用 JS 更改时如何获取选定值

Question

我被卡住了，想选择选择选项。

<select class="form-control" data-live-search="true" id="itemb">
<option data-tokens="All">All</option>

@foreach (var item in ViewBag.brandCategories)
{                                    
  <option>@item.brandName</option>
}
</select>

//search by brand name..
    $("#itemb").change(function () {
        
        var typp = document.getElementById("typ").value;
        var type = encodeURIComponent(typp);
        var brand = this.value;
        window.location.href = '/mobiles_tablets/item/?type=' + type + '&search=' + brand;
    });

在上面的代码中，我只是通过 @viewBag 获得了 @foreach 中的列表。但是现在我希望当它返回视图时它应该获得选定的值。

请写js代码？

谢谢。

Answer 1

这个sn-p代码将帮助你获取选择元素的选定值。您可以通过 codepen 修改/更改它，请查看以下链接。

https://codepen.io/uicreation/pen/KZmXbw

var el = document.getElementById('yourId');
el.onchange = function(){
  console.log(this.selectedOptions[0].value);
}

<select id="yourId">
  <option>one</option>
  <option>two</option>
  <option>three</option>
  <option>four</option>
  <option>five</option>
</select>

Answer 2

或者，如果您想获得选定的选项索引，请使用它。

var el = document.getElementById('yourId');
el.onchange = function(){
  console.log(this.selectedIndex);
}