jquery multiselect: Cannot remove items from list


Not sure what I'm doing wrong here. But from a normal dropdown I can remove items from the list by doing

document.getElementById("dropdownlist1").options.length = 0

However, this doesn't seem to work with the multiselect I'm using (http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/) and I can't for the life of me see what I'm doing wrong. i've tried the code shown below just from stuff off the internet but none of it seemed to have any effect. no errors, but no items removed either

what's going on there?
document.getElementById("multiselect1").options.length = 0
        while (document.getElementById("multiselect1").hasChildNodes()) {
        $('#multiselect1').empty().append('<option selected="selected" value="whatever">text</option>');

Open in new window

Who is Participating?
Looking at the source of one of the demos, the code is using


So try


Without seeing your markup, it is difficult to pinpoint the problem.

I will say, however, that a lot of jQueryUI form widgets actually hide the base object (select element) and instead display other types of elements (such as an unordered list).  

I think that the multi-select that you are using does this.  I would have to see more of your code or, better yet, a live link to be sure.
AidenAAuthor Commented:
Hi CodeCruiser, looking at that code I think it would be more likely to be


but in fact neither way works. I copied the source below which had a couple elements added in. It's inside a ul but that's by me not by the jquery code. It's inside divs etc and ajax update panel but otherwise nothing much else.

So, apart from that it just looks like a normal select then?
<li><select name="multiselect1" id="multiselect1" multiple="multiple">
		<option selected="selected" value="XXXX1">XXXX1</option>
		<option selected="selected" value="XXXX2">XXXX2</option>

Open in new window

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

AidenAAuthor Commented:
just another thought, i have a style sheet which accesses the multiselect element like so:

.ui-multiselect-checkboxes li {clear:both; font-size:0.9em; padding-right:0px}

is there some way to use that through ajax and possibly add another style which removes the writing? although not sure if that's getting messy...
AidenAAuthor Commented:
(not through ajax, through jquery of course or javascript)
AidenAAuthor Commented:
The following code solves the issue

document.getElementById("multiselect1").options.length = 0

refresh is required to see any changes for some reason. I will give codecruiser some points for getting closest.

thanks for help, Aiden
AidenAAuthor Commented:
acutally i see you had said it there and i missed it...

obviously my fault but could have been good if you'd specified that the link contained a refresh method i should have tried. i think i looked at the link but just saw it was an example and didn't look closely enough

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.