Change dropdown option with jQuery/Javascript on link click

Question

Let's say I have the following links and dropdown:

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

Basically I want each link to change to the respective selection option.

To give you a context, right now I have a form in the end of a page, and in the beginning I have a couple of e-mail links. When someone clicks a link, it'll scroll (anchor) to the form. The form has this dropdown to select the recipient. I want it to not only scroll to the form (which is already done) but also to automatically change the option based on the link clicked.

How can I achieve this?

Answer 1

Add a data-select attribute to those links:

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

Then use the value of the clicked link to set the value of the select element:

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

Here's the fiddle: http://jsfiddle.net/Dw6Yv/

---

If you don't want to add those data-select attributes to your markup, you can use this:

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

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

Here's the fiddle: http://jsfiddle.net/Bxz24/

Just keep in mind that this will require your links to be in the exact same order as the select options.

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

Answer 3

另外还有一种使用label选项的方法，这种方法可以确保即使没有html5 data也可以使用。