时间戳

首页 > 解决方案 > 使用 js 定位选项列表的当前值，并将该值添加到对象？

dom - 使用 js 定位选项列表的当前值，并将该值添加到对象？

问题描述

HTML

<div class="options-container">
 <select id="all-options">
  <option value="0" selected>NY</option>
  <option value="1">LA</option>
  <option value="2">Toronto</option>
  <option value="3">Paris</option>
 </select>
</div>

JS

let selectedOption = {};
let allOptions = document.getElementById('all-options');
let optionValue = allOptions.options[all-options.selectedIndex].value;
if (optionValue == "0") {
    selectedOption.value === "0"
} else if (optionValue  === "1") {
    selectedOption.value === "1"
} else if (optionValue  === "2") {
    selectedOption.value === "2"
} else if (optionValue  === "3") {
    selectedOption.value === "3"
};

我正在尝试使用 JS 在我的 HTML 文件中定位选项列表元素的当前值，以便我可以将该值添加到 selectedOption 对象。该值可以作为字符串或数字对象添加。

标签： domjavascript-objects

解决方案

定义事件监听器

您将要在<select>. 例如：

        function onSelectItem(evt)
        {
            let value = evt.target.selectedOptions[0].value;
            let text = evt.target.selectedOptions[0].text;

            // Assign it how you want here:
            selectedOption = value;
        }

你不能真正“推”到一个对象。如果您的意思是数组，请将所选选项更改为数组 ( []) 并执行selectedOption.push(value). 但是，如果您想要一个有用的对象，则可以将其分配给evt.target.selectedOptions[0].

附加监听器

之后，您可以将其附加到 html 中，并通过默认event变量传递事件对象：

    <select id="all-options" onchange="onSelectItem(event)">
      <option value="0">NY</option>
      <option value="1">LA</option>
      <option value="2">Toronto</option>
      <option value="3">Paris</option>
    </select>

页面加载时或更多 Javascript（通过将onload属性设置为"init()"in <body>）：

        function init()
        {
            let menu = document.getElementById('all-options');

            menu.addEventListener('change', onSelectItem);
            // Since it seems that you also want a default selected value when the 
            // page loads, you should probably also initialize your `selectedOption` to `0`.
            selectedOption = menu.selectedOptions[0].value;
        }

推荐阅读