Jquery根据点击的链接更改下拉列表

Question

我正在尝试根据用户点击的链接

更改下拉列表中的选定值

<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，但没有运气

提前谢谢

Answer 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;
});

演示是HERE

Answer 2

您可以通过定位索引值来选择该选项。这是一个更整洁和最少的代码

$('a').on('click', function(){    
    var id = this.id;
    $('#dropdown')[0].selectedIndex = id - 1;
});

<强> JSFIDDLE

Answer 3

另一种方法是：

$('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;

    }

});