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

Question

我有一个 select 区域，里面有一堆 options，其中一个有 selected 在行动（这些东西都是用 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

避免使用内联脚本。您可以使用 prev 方法来获取以前的值，如下所示：

$('#mylist').on('change',function(){
   var prevValue = $(this).find('option:selected').prev().val();
   window.location.href=prevValue; // not sure about your href
});

好吧，正如 Rayon 所说，如果您选择了第一个选项，那么您可能想要获得最后一个值。那么你可以这样做：

$('#mylist').on('change',function(){
   var optionSelected = $(this).find('option:selected');
   var desiredValue = optionSelected.prev().length 
        ? 
      optionSelected.prev().val() : $(this).find('option:last').val();
   window.location.href=desiredValue; // not sure about your href
});

Answer 2

您可以使用普通 JavaScript，尤其是 previousElementSibling。请注意，更改 select 元素的值不会更改其在预处理器输出中设置的 selected 属性。此代码将获取前一个选项元素的值，除非 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>

如果您改编类似这样的内容，请确保 select 用户选择的选项。

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

Getting a specific option relative to selected one (JavaScript/jQuery)

javascript

jquery

html

html-select