在href = jquery上用鼠標懸停選擇選項

Question

我想用hover上的mouseover動態地改變選擇。

的HTML：

<select name = "modifiers[11]" id = "selectImg" class = "selectImg"> 

<option value ="43" > Natural Black </option> 
<option value="44"> Red <!--(+$10.50)--></option> 
<option value ="45" > Brown <!--(+$10.50)--></option> 
<option value="46"> Green <!--(+$10.50)--></option> 
<option value ="47" > Blue <!--(+$10.50)--></option> 

</select> 

<a id="18" href="#">link1</a> 
<a id="19" href="#">link2</a> 
<a id="20" href="#">link3</a> 
<a id="21" href="#">link4</a> 
<a id="22" href="#">link4</a> 

jQuery的：

$('#18 a').hover(function() { 
    $('#43').attr('selected', 'selected'); 
}); 
$('#19 a').hover(function() { 
    $('#44').attr('selected', 'selected'); 
}); 
$('#20 a').hover(function() { 
    $('#45').attr('selected', 'selected'); 
}); 
$('#21 a').hover(function() { 
    $('#46').attr('selected', 'selected'); 
}); 
$('#22 a').hover(function() { 
    $('#47').attr('selected', 'selected'); 
}); 

這裏是一個小提琴我一直在工作。 http://jsfiddle.net/NnEdM/3/

我在做什麼錯？

編輯

我想補充，我發現這個的jsfiddle，和它的作品上懸停，但我的價值觀不會在1 http://jsfiddle.net/SEqZG/23/

Answer 1

jsFiddle Demo

幾件事情是開始出錯了。首先，您應該使用prop而不是attr。其次，你沒有在幾個地方正確選擇元素。 $('#22 a')將選擇一個嵌套的錨定標記，並應像這樣定位實際錨點：$('#22')。此外，$('#47')將尋找id這個不存在的元素，您應該在select元素下找到值爲47的選項，如下所示：$('#selectImg option[value=47]')。這裏是最終結果

$('#18').hover(function() { 
$('#selectImg option[value=43]').prop('selected', 'selected'); 
}); 
$('#19').hover(function() { 
$('#selectImg option[value=44]').prop('selected', 'selected'); 
}); 
$('#20').hover(function() { 
$('#selectImg option[value=45]').prop('selected', 'selected'); 
}); 
$('#21').hover(function() { 
$('#selectImg option[value=46]').prop('selected', 'selected'); 
}); 
$('#22').hover(function() { 
$('#selectImg option[value=47]').prop('selected', 'selected'); 
});