CODEWITHSUNDEEP
javascriptjquerycss
user1146223
user1146223

Reputation: 209

How to hide the dropdown list in a select box?

I'm working on a little custom dropdown multi-select using JQuery.

What I'm doing is hiding a multiple select box until a seperate select box is clicked - to keep things looking native in the browser it's in.

However, I'm trying to make the multiple select box look kind of like it's part of the normal select box.

So, you click the select box and the multiple appears just below it, appearing to be part of it.

Then, when you make your selections and click the original select box, the multiple box disappears again.

Anyway, this is all working great, except the single option I have inside the standard box keeps appearing on top of the multiple select box.

I've tried using z-index properties to fix this, but to no avail.

Is there a way to hide the dropdown, or essentially disable the dropdown without actually setting the disabled attribute?

Upvotes: 1

Views: 9296

Answers (5)

Vi_XKI
Vi_XKI

Reputation: 1

<div class="col-sm-8" id="brocciu" hidden>
  <select class="form-control" id="brokAcc" name="brokAcc">
    <option value="1"> One </option> 
    <option value="2"> Two </option> 
    <option value="3"> Three </option>                                         
  </select>  
</div>

Upvotes: 0

Vi_XKI
Vi_XKI

Reputation: 1

 1. <select class="form-control" id="brAccount" name="brAccount"**disabled**> </select>
 2. <select class="form-control" id="brAccount" name="brAccount" **style="display:none**"> </select>
 3. <select class="form-control" id="brAccount" name="brAccount" **style="display:block"** > </select>
 4. <select class="form-control" id="brAccount" name="brAccount" **hidden="hidden"** > </select>

Upvotes: -3

bfuoco
bfuoco

Reputation: 715

You can use CSS to hide the option elements in a select box. So you could programmatically hide the options in the first select box while you have the multi-select box up. This will show the currently selected value but hide all options when you click on it.

Here's a short fiddle with the CSS/HTML:
http://jsfiddle.net/LWPL3/

CSS

.hidden {
    display: none;
}

HTML

<select>
    <option class="hidden">Option 1</option>
    <option class="hidden">Option 2</option>
    <option class="hidden">Option 3</option>
</select>

From there, you could just $(optionelements).addClass('hidden') to the option elements in the main select box whenever you want to hide them.

Upvotes: 0

user1146223
user1146223

Reputation: 209

What I've ended up doing is having no options inside the original select box and having a disabled one in the multi select that says "Select up to 3" so people still see the instructions, but only after the click.

It's not as good, but it'll work.

Upvotes: 0

fet
fet

Reputation: 624

You don't have to disable the dropdown, if you're using jQuery you can simply .hide() the multiselect, which basically sets the style='' attribute to display:none;.

$("#your_multiselect").hide(); // .show(); when you want to bring it back.

Upvotes: 2

Related Questions