更改链接点击使用jQuery / JavaScript的下拉选项(Change dropdown o

比方说，我有以下链接和下拉菜单：

<a href="#contact">Send a mail to mother!</a>
<a href="#contact">Send a mail to father!</a>
<a href="#contact">Send a mail to sister!</a>
<a href="#contact">Send a mail to brother!</a>

<form id="contact">
    <select id="recipient">
        <option value="mother@mail.com">Mother</option>
        <option value="father@mail.com">Father</option>
        <option value="sister@mail.com">Sister</option>
        <option value="brother@mail.com">Brother</option>
    </select>
</form>

基本上，我想每一个环节更改为相应的选择选项。

为了给你一个背景，现在我有一个页面的最后一种形式，并在开始的时候我有一对夫妇的电子邮件中的链接。当有人点击一个链接，它会滚动（锚）的形式。窗体有这个下拉菜单选择收件人。我希望它不仅滚动形式（其中已经完成），而且还可以自动根据变化点击了该链接的选项。

我怎样才能做到这一点？

Answer 1:

添加data-select属性，这些链接：

<a href="#contact" data-select="mother@mail.com">Send a mail to mother!</a>
<a href="#contact" data-select="father@mail.com">Send a mail to father!</a>
<a href="#contact" data-select="sister@mail.com">Send a mail to sister!</a>
<a href="#contact" data-select="brother@mail.com">Send a mail to brother!</a>

然后使用点击链接的值来设定的值select元素：

var $select = $('#recipient');
$('a[href="#contact"]').click(function () {
    $select.val( $(this).data('select') );
});

这里的小提琴： http://jsfiddle.net/Dw6Yv/

如果你不希望将这些添加data-select属性，您的标记，你可以这样做：

var $select = $('#recipient'),
    $links = $('a[href="#contact"]');

$links.click(function () {
    $select.prop('selectedIndex', $links.index(this) );
});

这里的小提琴： http://jsfiddle.net/Bxz24/

请记住，这将需要你的链接是在确切相同的次序select选项。

Answer 2:

If the order is allways the same you can do this

$("a").click(function(){
    $("#recipient").prop("selectedIndex", $(this).index());
});

Otherwise do this by defining the index on the link:

<a href="#contact" data-index="0">Send a mail to mother!</a>
<a href="#contact" data-index="1">Send a mail to father!</a>
<a href="#contact" data-index="2">Send a mail to sister!</a>
<a href="#contact" data-index="3">Send a mail to brother!</a>

<form id="contact">
    <select id="recipient">
        <option value="mother@mail.com">Mother</option>
        <option value="father@mail.com">Father</option>
        <option value="sister@mail.com">Sister</option>
        <option value="brother@mail.com">Brother</option>
    </select>
</form>

$("a").click(function(){
    $("#recipient").prop("selectedIndex", $(this).data("index"));
});