Question

我的HTML看起来像这样，当我单击其中一个选项时，我想获取它的值。我已经尝试了很多东西，但是没有用。

<select id="sortby" name="sortby">
   <option value="cook">cook</option>
   <option value="price">price</option>
   <option value="calories">calories</option>
   <option value="quantity">quantity</option>
</select>

Answer 1

您可以使用 change 事件并获取选定的选项值触发 onchange 事件后。

var mySelect = document.getElementById('sortby');
var showTheValue = document.getElementById('show-value');

mySelect.addEventListener('change', function (event) {

    var value = event.target.selectedOptions[0].value;
    showTheValue.innerText = value;

});

<select id="sortby" name="sortby">
   <option value="cook">cook</option>
   <option value="price">price</option>
   <option value="calories">calories</option>
   <option value="quantity">quantity</option>
</select>

<p id="show-value"></p>

如何在下拉列表中获取所选选项的目标值

1 个答案: