更改下拉選項單擊

Question

比方說，我有以下鏈接和下拉菜單：

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

然後使用點擊鏈接的值來設置的值元素：

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

如果訂單是百達一樣，你可以做到這一點

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

由鏈路上定義的索引，否則這樣做：

<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

也there is another way使用label選項，這是肯定的工作也沒有html5 data。