javascript - 获取与所选选项相关的特定选项 (JavaScript/jQuery)

Question

我有一个选择区域，里面有一堆选项，其中一个已选择(这些东西都是用PHP生成的) ，如果好奇的话)。它们每个都有一个值，该值被添加到网址并在单击时重定向到。从本质上讲，这是；

<select id="mylist" onchange="window.location.href=this.value">
    <option value="lorem">        Option 5 </option>
    <option value="ipsum">        Option 4 </option>
    <option value="dolor">        Option 3 </option> //want this value
    <option value="sit" selected> Option 2 </option>
    <option value="amet,">        Option 1 </option>
</select>

是否有任何方法可以使用 JavaScript/jQuery 等直接获取所选选项之上的选项值？如果所选选项位于顶部，是否还有一种方法可以触发某些内容？

Answer 1

您可以使用纯 JavaScript，特别是 previousElementSibling 。请注意，更改 select 元素的值不会更改其在预处理器输出上设置的 selected 属性。此代码将获取前一个选项元素的值，除非所选元素是第一个:

document.getElementById('mylist').addEventListener('change',function(){
    var selectedOption = this.querySelector('[selected]');
    var precedingSelected = selectedOption.previousElementSibling;
    var value = precedingSelected == null ?
                selectedOption.value :
                precedingSelected.value;
    alert(value); // dolor
});

    <select id="mylist">
       <option value="lorem">        Option 5 </option>
       <option value="ipsum">        Option 4 </option>
       <option value="dolor">        Option 3 </option>
       <option value="sit" selected> Option 2 </option>
       <option value="amet,">        Option 1 </option>
    </select>

如果您调整类似的内容，请务必选择用户选择的选项。