當我點擊一個錨標記時更改選擇選項

Question

我想要做的是替換/更改當我點擊錨標記時，select標記中的文本。你會發現它只會改變一次。我究竟做錯了什麼？

HTML

<div id="navigation"> 
    <ul> 
     <li><a id="slideOne" href="#blue">Blue Product</a></li> 
     <li><a id="slideTwo" href="#red">Red Product</a></li> 
    </ul> 
</div> 

<select> 
    <option disabled="disabled" selected="selected">Select Color</option> 
    <option value="blue">Blue</option> 
    <option value="red">Red</option> 
</select>​ 

JS

$('#navigation a').click(function() { 
    $('select').val(this.id).change(); 
});​ 

這是我jsFiddle。

Answer 1

錨的值不與在選擇的值映射。所以他們之間有沒有關係的ID ..

嘗試使用HREF屬性，而不是...

Answer 2

使用類名來存儲你的顏色屬性，然後在你的事件中使用它們。

<div id="navigation"> 
    <ul> 
     <li><a id="slideOne" class="blue" href="#blue">Blue Product</a></li> 
     <li><a id="slideTwo" class="red" href="#red">Red Product</a></li> 
    </ul> 
</div> 

JS：

$('#navigation a').click(function() { 
    $('select').val($(this).attr('class')) 
}); 

Answer 3

你的JS應該是這樣的：

$('#navigation a').click(function() { 
    var lookup={ 
     'slideOne' : 'blue', 
     'slideTwo' : 'red' 
    } 
    var target = lookup[this.id]; 
    $("select option[val=" + target +"]").attr("selected","selected") ; 
});​ 

一個更好的選擇是使用href屬性可能在elminate依賴查找對象

Answer 4

您將獲得與您的選項完全不匹配的錨的ID。

你可以像下面這樣做

$('#navigation a').click(function() { 
    $('select').val(this.href.split('#')[1]).change(); 
});​ 

FIDDLE

爲@Destroy建議你可以使用.slice（1）也

$('#navigation a').click(function() { 
    $('select').val($(this).attr('href').slice(1)).change(); 
});​ 

Slice Fiddle

或.replace （）

$('#navigation a').click(function() { 
    $('select').val($(this).attr('href').replace('#','')).change(); 
});​ 

Replace Fiddle