Remove and Add

[reru]

Hi,
thank you for this great plugin. I have two select on my page and I would like to populate the second one when the user selects something from the first one. So, I need to remove all the old options and to add all the new options( I get them with ajax). I tried to use .remove() and then .add() and also .remove() and then populate, but it doesn't work. Is there a way to achieve what I want?
When I use .remove(), like in your example: $("select").data("selectBox-selectBoxIt").remove(); it removes the selectbox plugin on that select ( I have a select with no options and with the native select box graphics). Even if I remove only one option the graphics turn to normal ( no more selectboxit) and I have this errore: Cannot call method 'show' of undefined
Thank you again.

[yanickrochon]

If I may, you can simply manipulate your underlaying SELECT element and refresh it. Like so

$("#selectBoxId").empty().selectBoxIt("refresh");

and repopulate it

$("#selectBoxId").append('<option value="bleh">Bleh option</option>');  // append more as needed
// ....
$("#selectBoxId").selectBoxIt("refresh");

The function remove is the remove the entire SELECT element, not the selectBoxIt widget.

[reru]

@yanickrochon I did what you said, but the problem is the same as before ( when I used remove) It removes the options and the graphics and it doesn't add anything...:( If I use only the last part ( the append), it appends the new option ( like add, but add keeps the selectboxit graphic), but the graphics turns normal( not the selectboxit graphic) and I still have the same error as before.
On the selectboxit page the remove function works ( it removes the options, but the graphic is the good one), so I believe that it's not like you said.
thank you for the quick answer...:)

[gfranko]

@reru Here is a jsbin that shows how you can remove all drop down options and populate a new drop down using the remove() and add() methods. Let me know if you have any questions about it!

@yanickrochon Although confusing, SelectBoxIt has it's own remove() method that is separate from the jQuery remove() method that will remove all select box options. Thanks for helping out though, I love having other people to also answer questions.

[reru]

It works!!! :) thank you very much! The problem was jquery...I looked at your example and I saw that you used jquery 1.8.3, on my page I had: 1.7.1 In your requirements you wrote: jQuery 1.7+, so I thought that it was ok, but it's not. You can check in your jsbin example( 1.7.1 doesn't work). I'm telling you this only to help, not to criticize such a fantastic job(your plugin)...maybe you should fix it for 1.7.1 or change the requirements.
Thank you very,very much again!!!

[gfranko]

@reru Good catch! I will keep this issue open until the jQuery 1.7.1 issue is fixed. It should be fixed in the next release!

[gfranko]

I have decided to no longer fully support jQuery versions < 1.8.3 =)

[bluesky88]

@gfranko

Hi, I am just trying using the add() methods with HTML strings which is same with the example HTML strings from populate options like below, however it still not able to read it! The reason to use HTML string is to display the label when populate the list.

Example HTML strings from populate,
// Populates the drop down using a JSON array
populate: '< option value="SelectBoxIt is:" >SelectBoxIt is:</ option >' +
'< option value="a jQuery Plugin" >a jQuery Plugin</ option >' +
'< option value="a Select Box Replacement" >a Select Box Replacement</ option >' +
'< option value="a Stateful UI Widget" >a Stateful UI Widget</ option >'

Example HTML string will use to populate,

'< optgroup label="Japan" >'+'< option value="tokyo" >Tokyo</ option >' + '</ optgroup >' +
'< optgroup label="Indonesia" >'+ '< option value="bali" >Bali</ option >' +
'< option value="Jakarta" >Jakarta</ option >' + '</ optgroup >'

How to populate new drop down with HTML strings using add() method?
Thank you so much.