使用jQuery来创建它选择一个下拉选项

Question

链接这个问题脱落另一个问题在这里：use jquery to select a dropdown option

但是我下面这个例子中，我不明白，在顶端回答示范

$('select>option:eq(3)').attr('selected', true);

http://www.jsfiddle.net/gaby/CWvwn/

的答案都不提供的链接代码，使用户可以通过点击它来改变下拉选项。链接看起来像使用这个脚本是什么？

Answer 1

一个可能的选择是使用nth-child伪选择这样的：

$('select::nth-child(2)').attr('selected', true); 

或者，如果选择正确完成，像这样：

<select> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
</select> 

您可以通过value属性选择：

$('select>option[value=4]').attr('selected', true); 

---

既然你一定会希望有更多的联系，这是很方便的定义一个函数：

JS

function showOptWithValue(which) { 
    $('select>option[value=' + which + ']').attr('selected', true); 
} 

现在，这个功能绑定到你的链接，您可以使用onclick ：

HTML

<a href="#" onClick="showOptWithValue(3); return false;">The Link</a> 

或分配纯jQuery的单击处理：

HTML

<a href="#">The Link</a> 

JS

$('a').on('click', function(){ 
    showOptWithValue(3); 
    return false; 
}); 

这里是的jsfiddle一些工作示例：http://jsfiddle.net/FY3tz/1/

Answer 2

这里你去：DEMO

$('.link').click(function() { 
    $('select>option:eq(3)').attr('selected', true); 
}); 

Answer 3

//html 

<a id="myLink" href="#">My link</a> 
<select> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
    <option>4</option> 
    <option>5</option> 
</select> 

//js 

$('#myLink').click(function() { 
    $('select>option:eq(3)').attr('selected', true); 
}) 

Answer 4

<select> 
     <option>1</option> 
     <option>2</option> 
     <option>3</option> 
     <option>4</option> 
     <option>5</option> 
    </select> 


    <a id="btn-change-option" data-option="2" href="#">Change to 3</a> 

    <script> 

    $("#btn-change-option").click(function(){ 

     // get option to select from the data attribute of your link 
     var optionToSelect = $(this).data('option'); 

     $('select>option:eq('+optionToSelect +')').attr('selected', true); 

    }) 

    </script>