1

我想用鼠标悬停在href上动态更改选择。

的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/开始

4

1 回答 1

2

jsFiddle 演示

有几件事出了问题。首先，您应该使用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');
});
于 2013-04-05T18:27:27.327 回答