Skip to content

Possible to hide options instead of disable? #259

Closed
mkrajew opened this Issue Aug 14, 2012 · 7 comments

3 participants

@mkrajew
mkrajew commented Aug 14, 2012

Thanks so much for the selectmenu control! It's been working well so far for me, but I am running into a question that I do not know how to solve.

We are basically doing cascading dropdown lists so you select a certain value in List A and then I have a list of option values that I need to allow in List B. Right now I am disabling all the options for each index that is not valid by doing:

$('select#ddlListB').selectmenu('disable', index);

This works, however ideally I would like to be able to hide the individual option and not show it at all. So something more like:

$('select#ddlListB').selectmenu('hide', index);

// would also need to add
$('select#ddlListB').selectmenu('show', index);

Or would there be a better jQuery way of hiding these items?

@fnagel
Owner
fnagel commented Aug 30, 2012

Sorry for the late response, I configured something wrong when GitHub changed there notification system and therefore did not receive any emails :-(

There is no built-in mechanism to really hide elements. You could change the ui-state-disabled CSS style, perhaps in combination with a own style for the widget (see default demo, #speedAa).

Does this help?

@tschettler

I saw this as well. What you can do is add a class to the select option that has "display: none" and then just call selectmenu over the select element again. The selectmenu call will add the class to the li item, so you'd need to have that as a style rule as well.

The following should work:
.hidden, .ui-selectmenu-menu li.hidden { display: none; }

Script to hide the third option:
$('select option:eq(2)').addClass('hidden');
$('select').selectmenu();

@mkrajew
mkrajew commented Aug 31, 2012

Thank you! tschettler's suggestion worked great. I've got it working in my dropdown now.

While it would be nice to have "hide" and "show" options integrated as a new feature, this is a great workaround.

@tschettler

Glad it worked for you!

If you are using optgroups, there's an additional step to take if you don't want the optgroup header to display in the selectmenu. After calling selectmenu() again, you can do this:
$('.ui-selectmenu-group').not(':has(li:not(.hidden))').hide();

@fnagel
Owner
fnagel commented Oct 1, 2012

Is this issue solved?

@mkrajew
mkrajew commented Oct 1, 2012

Yes, it is solved in the sense that there tschettler's workaround works. I would say that adding "hide" and "show" items by index would be a nice new feature so the workaround wouldn't need to be used.

For instance the workaround does this:
$('select option:eq(2)').addClass('hidden'); // add the 'hidden' class to the selectmenu option of index 2
$('select#ddlListB').selectmenu(); // reload the selectmenu

Where it would be clearer to be able to do this:
var index = 2;
$('select#ddlListB').selectmenu('hide', index);

@fnagel
Owner
fnagel commented Oct 12, 2012

@mkrajew Please open a new issue for that, with a reference to this issue. THX!

@fnagel fnagel closed this Oct 12, 2012
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.