获取相对于选中的选项的特定选项(JavaScript/jQuery)

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

本文关键字：选项 JavaScript jQuery 相对于 获取      更新时间：2023-09-26

我有一个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或喜欢的选项上面获得选项的值?如果选择的选项位于顶部，是否也有触发某些内容的方法?

您可以使用纯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>

避免使用内联脚本。您可以使用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
});
相关文章：