CODEWITHSUNDEEP
jqueryhtmlcss
DG3
DG3

Reputation: 5298

checkbox within the dropdown

I am trying to get checkboxes within a select dropdown (multiple) as below:

<select name="select_dd" size="5" multiple>
       <option value="1"><input type="checkbox" name="chk_val" value="1" />1</option>
</select>

I think the above is not a valid one as the checkboxes are appearing outside the select.

So I tried a different approach:

<div id="selectlist">
    <ul>
        <li><input type="checkbox" name="chk_val" value="1" />1</li>
        <li><input type="checkbox" name="chk_val" value="1" />1</li>
    </ul>
</div>

and then using css to style the div

#selectlist{
border:1px solid;
height:50px;
overflow-y:scroll;
width:auto;
text-align:left;

}
#selectlist ul{
list-style-type: none;
}

is this a good approach? Can anyone suggest if there are other alternatives available for this kind of use like using jquery plugins.

Upvotes: 4

Views: 18066

Answers (4)

Mike Veigel
Mike Veigel

Reputation: 3815

There is nothing wrong with this approach (how you wrapped it in a div above Ie your second example). Using CSS to style how you want your checkboxes inside of your list is perfectly fine.

Upvotes: 0

Stefan Steiger
Stefan Steiger

Reputation: 82136

See this:
http://harvesthq.github.com/chosen/
or this:
http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/
or this:
http://code.google.com/p/jquery-tree/
or this:
http://code.google.com/p/dropdown-check-list/
or this for an ASP.NET control:
http://www.codeproject.com/Articles/24205/MultiSelect-Dropdown-Control

Upvotes: 8

Shauna
Shauna

Reputation: 9596

In addition to the checkbox list plugins NgM listed, you can also make the select element a multi select (multiple=true, I think), which might accomplish the same thing you're after.

Upvotes: 0

ShankarSangoli
ShankarSangoli

Reputation: 69905

You cannot have a input element within option tag. Using ul/li combination is the right alternative which you have done. You will have to write your own logic to behave it like a select control and raise the appropriate events.

Upvotes: 0

Related Questions