我正在尝试根据用户点击的链接
更改下拉列表中的选定值<a id="1" href="#1">number 1</a>
<a id="2" href="#2">number 2</a>
<a id="3" href="#3">number 3</a>
<select id="dropdown">
<option value="option one">option one</option>
<option value="option two">option two</option>
<option value="option three">option three</option>
</select>
当我的用户点击数字2链接时,我希望下拉列表显示选项二。任何帮助是极大的赞赏。
我尝试在.click函数中使用.prop和.val,但没有运气
提前谢谢
答案 0 :(得分:1)
为您的链接添加data-option
属性。此属性的值应与您要选择的option
的值相对应:
<a id="1" href="#1" data-option="option one">number 1</a>
<a id="2" href="#2" data-option="option two">number 2</a>
<a id="3" href="#3" data-option="option three">number 3</a>
将click
听众附加到您的链接。在其中获取点击链接的data-option
值,然后使用它找到您要选择的option
:
$(document).on("click", "a", function(e){
//get clicked value
var option = $(this).attr("data-option");
//find the option to select
var optionToSelect = $("#dropdown").children("[value='" + option + "']");
//mark the option as selected
optionToSelect.prop("selected", "selected");
return false;
});
答案 1 :(得分:0)
您可以通过定位索引值来选择该选项。这是一个更整洁和最少的代码
$('a').on('click', function(){
var id = this.id;
$('#dropdown')[0].selectedIndex = id - 1;
});
<强> JSFIDDLE 强>
答案 2 :(得分:0)
另一种方法是:
$('a').on('click', function(){
var id = this.id;
switch(n) {
case '1':
$('#dropdown').selectedIndex = 0;
break;
case '2':
$('#dropdown').selectedIndex = 1;
break;
case '3':
$('#dropdown').selectedIndex = 2;
break;
}
});