Friday, July 27, 2007

Select box manipulation with jQuery - update to removeOption

The previous update to this collection of plugins introduced a cache when adding options (i.e. made it much faster if adding a lot of options). However, it was not cleared when remove options (causing possible conflicts). This is now done and an extra parameter has been added to removeOption (of boolean type), that when set to true, will only remove options if it matches any option(s) defined by the first parameter. More details and download from the Select Box Manipulation project page at the jQuery site. A demo is also available.

4 comments:

Marcus said...

The demo on the page http://www.texotela.co.uk/code/jquery/select/ has a bug - selecting both options in the second select box (e.g. by clicking and dragging, or CTRL+clicking) results in only one value being displayed in the text below it. I haven't looked into the code to see whether this is a bug with the plugin itself or just with the demo, but either way it's not right. Best regards, MarcusT.

Sam said...

It's the demo itself, as it is updated onchange $("select").change(function(){...}); and it uses selectedIndex to determine what is selected (rather than looping through all of the optionsin the select).

Anonymous said...

Hi Sam

It's late but I really need to do some select box manipulation on mouseover events, but I just need some html AND jscode together.

I've seen your example page and it looks great and what I need but right now I can't figure out what I need for the html to trigger the events necessary to add and remove fields from the form list.

Would appreciate any hint

Sam said...

You mean add options when you hover over something (e.g. a link?)

This adds a value to a select box when you mouse over any anchors elements in a list. Probably not exactly what you are looking for, but maybe of some help?

HTML:
<ul id="linklist">
<li><a href="http://www.jquery.com">jQuery</a></li>
<li><a href="http://www.google.com">Google</a></li>
<li><a href="http://www.yahoo.com">Yahoo</a></li>
</ul>
<select id="mylinks"></select>

JavaScript (in $(document).ready):

$mylinks = $("#mylinks");
$("#linklist a").mouseover(function() {
$mylinks.addOption($(this).text(), this.href);
});