• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1574
  • Last Modified:

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

  • 5
1 Solution
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.
Looking at the source of one of the demos, the code is using


So try


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

Nothing ever in the clear!

This technical paper will help you implement VMware’s VM encryption as well as implement Veeam encryption which together will achieve the nothing ever in the clear goal. If a bad guy steals VMs, backups or traffic they get nothing.

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


Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now