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="[e-mail]">Mother</option>
        <option value="[e-mail]">Father</option>
        <option value="[e-mail]">Sister</option>
        <option value="[e-mail]">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="[e-mail]">Send a mail to mother!</a>
<a href="#contact" data-select="[e-mail]">Send a mail to father!</a>
<a href="#contact" data-select="[e-mail]">Send a mail to sister!</a>
<a href="#contact" data-select="[e-mail]">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.