Selecting a select option with a mouseover on a href= jquery -
i want change select dynamically mouseover on href.
the 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>
the 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'); });
here fiddle i've been working on. http://jsfiddle.net/nnedm/3/
what doing wrong?
edit
i wanted add, found jsfiddle, , works on hover values don't start @ 1 http://jsfiddle.net/seqzg/23/
a couple of things going wrong. first, should use prop
instead of attr
. second not selecting elements in few places. $('#22 a')
selected nested anchor tag , should target actual anchor this: $('#22')
. also, $('#47')
element of id
not present, should option value 47 beneath select element this: $('#selectimg option[value=47]')
. here end result
$('#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'); });
Comments
Post a Comment