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

时间:2013-08-02 14:59:47

标签: javascript jquery hyperlink html-select

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

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

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

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

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

4 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

在这里:DEMO

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

答案 2 :(得分:0)

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

答案 3 :(得分:0)

    <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>