2014-01-22 33 views
0

我想基于其上基于点击链接

<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链接以改变在下拉列表中选择的值jQuery的变化下拉,我想下拉显示选项二。任何帮助是极大的赞赏。

我已经使用。点击函数中.prop和.VAL尝试过,但还没有任何运气

预先感谢您

回答

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

+0

谢谢为您的快速回答和演示!非常感激 –

0

,您可以定位索引值只是选择的选项。这是一个很大整洁和最小码

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

JSFIDDLE

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; 

    } 

});