获取与所选选项相关的特定选项 (JavaScript/jQuery)
Getting a specific option relative to selected one (JavaScript/jQuery)
我有一个 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 或类似方法直接获取所选选项上方的选项值吗?如果所选选项在顶部,是否还有一种方法可以触发某些内容?
避免使用内联脚本。您可以使用 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
});
您可以使用普通 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 用户选择的选项。
我有一个 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 或类似方法直接获取所选选项上方的选项值吗?如果所选选项在顶部,是否还有一种方法可以触发某些内容?
避免使用内联脚本。您可以使用 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
});
您可以使用普通 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 用户选择的选项。