在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'); 
});