Question

I have a dropbox on my page from where a user can choose an item. From there they can choose to click on a button wich appends another dropbox (with jquery clone). What happends next is that the first dropbox gets disabled and the selected option from this first box is hidden in my second dropbox. This all works, but there’s one problem: when I choose the first option in the first box, this option is the selected one in my second box. When I open the box, it’s not there, so I can’t select it myself, but it is automaticly selected when I add the box!

Briefly
– two dropdowns
– selected option in dropdown 1 gets hidden in dropdown 2
– selected first option from dropdown 1 != selected (hidden) option in dropdown 2

I already tried disabling the option and refreshing the box but the option keeps being selected on the page load.

This is how I hide the item:
$('.group option[value='+selitem+']').hide();

Any ideas?

Answer 1

One thing to try would be to de-select the option like this:

.attr("selected","");

I’ve recently been struggling with select boxes, and I’ve found that there is not enough cross-browser consistency in how they behave regarding what they show as “selected” if nothing is selected, especially when adding and removing elements from them.

One solution to this that others have suggested (and I considered but my requirements didn’t make it worth my time) is to replace the select box with a more flexible jQuery-based solution that either replaces the browser’s select box with a “custom” one that mimics it, or to use a different UI from a select box and make it out of a list (possibly out of a list of radio buttons as the backing elements)