使用 jQuery 创建一个选择下拉选项的链接答案

【问题标题】：Use jQuery to create a link which selects a drop down option使用 jQuery 创建一个选择下拉选项的链接
【发布时间】：2013-08-02 14:59:46
【问题描述】：

这个问题来自另一个问题：use jquery to select a dropdown option

我正在关注这个例子，但是我不理解最佳答案中的演示

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

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

没有一个答案提供链接的代码，以便用户可以单击它来更改下拉选项。使用此脚本的链接是什么样的？

【问题讨论】：

标签： javascript jquery hyperlink html-select

【解决方案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);

既然你肯定想要更多的链接，定义一个函数很方便：

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>

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

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

【讨论】：

【解决方案2】：

给你：DEMO

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

【讨论】：

谢谢，那么$('.link').click(function() { $('select>option:eq(3)').attr('selected', true); }); 是否需要为下拉列表中的每个选项写出？
这取决于你想要完成什么功能:)

【解决方案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);
})

【讨论】：

【解决方案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>

【讨论】：