javascript - 使用 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

给你：演示

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