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

Use jQuery to create a link which selects a drop down option

本文关键字：用于 选择 选项 链接 一个 创建 jQuery 使用      更新时间：2023-09-26

这个问题来自这里的另一个问题：使用jquery选择下拉选项

然而，我正在遵循这个例子，我不理解顶部答案中的演示

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

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

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

一种可能的选择是使用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/

开始：演示

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

//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);
})

    <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>
相关文章：