Print Page - hiding/showing a combobox

Title: hiding/showing a combobox
Post by: tomhj on June 06, 2013, 08:24:35 AM

Based on a selection in another control, I need to be able to hide/show a combobox field. I tried using $.hide() and $.show() - but that doesn't seem to work with the combobox. $.show() results in an extra <select> element while $.hide() still leaves the combobox showing. It seems combobox works with a shadowy select element that is hidden while the combobox is shown so my calling $.show() reveals that hidden select.

I don't want to use destroy() if I can avoid it because I think that completely removes the HTML component making it harder to show it later.

Any suggestions?

Title: Re: hiding/showing a combobox
Post by: stworthy on June 06, 2013, 09:07:22 AM

The simple way to show/hide the combobox is to wrap it with a <div> and then show/hide this <div>.

Code:

<div id="cc">
  <input class="easyui-combobox"...>
</div>

<script>
$('#cc').show();
//or
$('#cc').hide();
</script>

Title: Re: hiding/showing a combobox
Post by: tomhj on June 06, 2013, 09:52:40 AM

That is what I tried:

Code:

var cb = $('#cb');
if (displayCB) {
    cb.combobox('loadData', []);
    cb.combobox('clear');
    cb.hide();
} else {
    cb.combobox('loadData', newData);
    cb.show()
}

The cb.show() results in a "regular" select appearing to the left of the combobox.
The cb.hide() results in the combobox remaining.

One difference is instead of starting from a <input>, I'm starting with a <select>. The ComboBox usage examples show that as a valid way to do it.

Update: I just changed it to an <input> and I'm seeing the same thing - instead of a "regular" select to the left, I'm seeing a "regular" text input control.

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: tomhj on June 06, 2013, 08:24:35 AM