CODEWITHSUNDEEP
javascriptjquerydrop-down-menu
Faili
Faili

Reputation: 1000

Suppress closing selectbox after choosing option

I'm getting a selectbox with an undefined amount of options.

Example
My selectbox contains 50 options with different values. What I do is to just show option 1-10 and 25-30. The others are detached. By clicking option 30 the detached options are attached.

My problem is that the selectbox closes like it always does after a selection. Is there a way to suppress this behaviour?

It would be really great if one clicked option 30 and the detached options would be displayed just under option 30 without the selectbox closing.

Upvotes: 0

Views: 182

Answers (2)

Dameo
Dameo

Reputation: 334

You could try setting the select box to be a multiple select box. Then when the 30th item is selected showing the additional items.

If you are really attached to using a regular select box, then you may be able to produce that action by having a "more options..." <option> that , when selected uses javascript to load and reopen the dropdown

If you provide some sample code I could work up an example, maybe

Upvotes: 2

Hazem Salama
Hazem Salama

Reputation: 15111

I am not sure that the select drop down would be the best element for your requirements. You may want to consider using a list of checkboxes inside a div whose overflow property is set to scroll. That might work out better for you. Getting a drop down to do what you've asked is a bit involved. See this fiddle for example

Sample html

<div id="container">
    <label><input type="checkbox" name="test" value="1" />Option 1</label>
    <label><input type="checkbox" name="test" value="2" />Option 2</label>
    <label><input type="checkbox" name="test" value="3" />Option 3</label>
    <label><input type="checkbox" name="test" value="4" />Option 4</label>
    <label><input type="checkbox" name="test" value="5" />Option 5</label>
    <label><input type="checkbox" name="test" value="6" />Option 6</label>
    <label><input type="checkbox" name="test" value="7" />Option 7</label>
    <label><input type="checkbox" name="test" value="8" />Option 8</label>
    <label><input type="checkbox" name="test" value="9" />Option 9</label>
    <label><input type="checkbox" name="test" value="10" />Option 10</label>
    <label><input type="checkbox" name="test" value="11" />Option 11</label>
    <label><input type="checkbox" name="test" value="12" />Option 12</label>
</div>

The CSS

label{display:block;}
#container{height:100px;width:200px;overflow:scroll;}

Upvotes: 1

Related Questions