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>

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

4 个答案: