HTML Checkboxes in select list

Question

I'm trying to build a checkbox list within a select list (like the one for countries here: link text)

I'm using Asp.net MVC so it needs to be pure/html &| javascript/JQuery. Is this possable? Or is there already a prebuild one I could download load?

Thanks

Ripped HTML/CSS:

 <html xmlns="http://www.w3.org/1999/xhtml" >
<head>

<style type="text/css">
body {  background-color: #FFFFFF; font-family: Tahoma; font-size: 11px; }

/* Control Skin */
input { font: normal 11px Tahoma; }
div.ctrl { background-color: window; border: solid 1px ThreeDLightShadow; vertical-align: top; margin: 0; padding: 0;  width: 268px; }
input.Button { background: #2F89BD url('images/btn_default%20gradient.gif') repeat-x; cursor: pointer;
                height: 24px; color: #FFF; border: solid 1px #2F82BE; padding: 0 10px; width: auto;
                overflow: visible; }
input.TextBox { border: solid 1px ThreeDLightShadow; height: 16px; padding-top: 2px; text-indent: 2px; width: 150px; }

/* For MultiSelectControl */
.ms_multiSelector { position: absolute; display:inline ; border: 1px solid ThreeDLightShadow; width: 268px; z-index: 100; }
.MultiSelectControl_txtInput { width: 240px; border: none 0; margin: 5px 0 0 5px; padding: 0; vertical-align: top; }
.ms_selectListWrapper { padding: 0; margin: 0; }
.ms_selectList { background-color: #FFFFFF; overflow: auto; height: 265px; _height: 150px; /* For IE 6 */ }
.ms_chkSelectAll { padding-left: 3px; }
.selectList_Wrapper { padding: 0; margin: 0; }
.multiSelectorCountry { position: relative; clear: both; display: none; border: 1px solid ThreeDLightShadow; width: 275px; }
.multiSelector { position: absolute; visibility: hidden; border: 1px solid ThreeDLightShadow; width: 275px; }
.mutliselect_container { padding: 0; margin: 0; border: 0; display: inline; }
.chkSelectAll { padding-left: 3px; }
.selectList { background-color: #FFFFFF; overflow: auto; height: 200px; _height: 150px; /* For IE 6 */ }
.chklstSelect INPUT { float: left; width: 20px; /* To align the chkbox text in FF */ }
.chklstSelect LABEL { text-align: left; float: right; width: 230px; /* To align the chkbox text in FF */ }
#imgMultiSelectArrow { width: 20px; height: 20px; margin-left: 300px; padding-left: 300px; }
.multiselect_close { padding: 4px 0; float: right; width: 65px; background: transparent url(https://careers.microsoft.com/images/close_btn.gif) no-repeat 33px center; }

</style>




<title>Untitled Page</title>
</head>
<body>
<div class="ctrl" >
<input  type="text" value="Software Engineering: Development" readonly="readonly"  class="MultiSelectControl_txtInput"  />
<img  onmouseover="this.src='https://careers.microsoft.com/Images/mm_dropdown_20x20_hover.gif'" onmouseout="this.src='https://careers.microsoft.com/Images/mm_dropdown_20x20.gif'"  src="https://careers.microsoft.com/Images/mm_dropdown_20x20.gif" alt="Show/Hide" style="height:20px;width:20px;border-width:0px;" />
</div>
<div  class="ms_multiSelector">

    <div id="selectList" class="ms_selectList">
        <input  type="checkbox" value="allcountry" class="ms_chkSelectAll" />
        <span class="ms_chkSelectAll"  >Select All</span>

<div>
        <input  type='checkbox'  value='1'  />
        <label>Business Services & Administration</label>
        <br />
        <input type='checkbox'  value='37'  />
        <label>Customer Service & Support</label>
        <br />
     </div>
  </div>

</div>


</body>
</html>

Thanks for your input guy. I've ripped a bit of the html out the site (above).I going to have a play around with it and see what happens. — Lee Smith
– Lee Smith, Commented Oct 1, 2009 at 10:51
I ended up using this one: code.google.com/p/dropdown-check-list — Lee Smith
– Lee Smith, Commented Nov 18, 2009 at 12:48

Dave Jarvis · Accepted Answer · 2014-03-27 01:57:48Z

12

A cross-browser CSS solution that conform CSS level 2 standard:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>select-multiple</title>
    <style>
       /* option:checked:before { content: "✓" } */
       option:before { content: "☐ " }
       option:checked:before { content: "☑ " }
    </style>
</head>
<body>
<h1>select-multiple</h1>
<select multiple="" size="5" style="width: 200px;">
    <option value="0">Banana</option>
    <option value="1">Cherry</option>
    <option value="2">Lemon</option>
    <option value="3">Banana</option>
    <option value="4">Cherry</option>
    <option value="5">Lemon</option>
    <option value="6">Banana</option>
</select>
</body>
</html>

Fiddle

edited Mar 27, 2014 at 1:57

Dave Jarvis

31.3k43 gold badges186 silver badges326 bronze badges

answered Mar 6, 2013 at 12:05

gavenkoa

49.7k28 gold badges274 silver badges342 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

gavenkoa Over a year ago

And also with some Chromium versions. But this is in very old standard which many vendors wouldn't implement completely.

Farray · Accepted Answer · 2012-05-29 07:08:00Z

6

In HTML the only valid children of the select element are option and optgroup. I strongly recommend not creating any sort of non-standard form control as you will be defeating accessibility. I recommend you use standard form controls in the standard manner with label elements only. You can modify the appearance and interactivity of those form controls to your hearts content using CSS and JavaScript, except don't alter the visual flow order or tab order as that also defeats accessibility.

The accessible alternative to the Microsoft form is to use a standard select list with the "multiple" attribute so that multiple options can be selected from a single list. Here is an example:

<select id="myselectlist" name="myselectlist" multiple="multiple">
    <option value="option 1">option 1</option>
</select>

You could use CSS to fake the appearance of checkboxes with the appearance of a checked checkbox as a background graphic that appears from the option's pseudo class of "active". I would not go much further than that however.

edited May 29, 2012 at 7:08

Farray

8,5883 gold badges35 silver badges37 bronze badges

answered Oct 1, 2009 at 10:04

austin cheney

1 Comment

eselk Over a year ago

I like this answer -- especially good if you want a better chance of working on phones, tablets, and other devices. Anything made "from scratch" is probably going to have an internal scroll-bar, like a div with overflow:auto, which most phones do not support (yet they do support standard list/combo controls). Stick with standard when you can.

pmrotule · Accepted Answer · 2014-08-20 21:45:16Z

I tried a lot of js plugin for checkboxes in select list and the best one so far is Bootstrap Multiselect

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>jQuery Multi Select Dropdown with Checkboxes</title>

<link rel="stylesheet" href="css/bootstrap-3.1.1.min.css" type="text/css" />
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css" />

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/bootstrap-3.1.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>

</head>

<body>

<form id="form1">

<div style="padding:20px">

<select id="chkveg" multiple="multiple">

    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella">Mozzarella</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="pepperoni">Pepperoni</option>
    <option value="onions">Onions</option>

</select>

<br /><br />

<input type="button" id="btnget" value="Get Selected Values" />

<script type="text/javascript">

$(function() {

    $('#chkveg').multiselect({

        includeSelectAllOption: true
    });

    $('#btnget').click(function(){

        alert($('#chkveg').val());
    });
});

</script>

</div>

</form>

</body>
</html>

Here's the DEMO

Palantir · Accepted Answer · 2009-10-01 09:40:03Z

2

Maybe this is not a real answer, but anyway:

That's not a standard HTML control, they built it with a series of text inputs and divs, you'd have to do LOTS of work to reproduce that behavior, so that it works (possibly with any browser)...

I'm not aware of any pre-built helpers for MVC, maybe there is something for JQuery? Anyway, if you can't find one and you had to do that manually, maybe you should choose other means with more standard components (or revert to flash or silverlight which are much more convenitent for this kind of customizations).

answered Oct 1, 2009 at 9:40

Palantir

24.2k11 gold badges79 silver badges88 bronze badges

Comments

Sir David of Lee · Accepted Answer · 2009-10-01 21:25:32Z

2

You could try just leaving it as is pretty much except add

.ms_selectList{ display: none; }

Add the above to what you already have for ms_selectList

Then in jquery have a click function of some kind that will make the ms_selectList display clock essentially making it appear to be like a select box when its really just an absolutely positioned div tag with a bunch of checkboxes inside.

And the jquery ought to be something like this,

$(document).ready(function(){

    $('.ctrl').click(function(){
        $('#selectList').toggle();
    });

})

edited Oct 1, 2009 at 21:25

answered Oct 1, 2009 at 21:15

Sir David of Lee

4732 silver badges6 bronze badges

Comments

Evernoob · Accepted Answer · 2009-10-01 09:46:44Z

0

This is not a standard HTML form control, it has been custom built by the developers.

I'm not aware of any open source solutions that exist that will reproduce this behaviour for you. I'm afraid it looks unlikely you can deliver this without more effort than it will be worth.

answered Oct 1, 2009 at 9:46

Evernoob

5,5718 gold badges39 silver badges50 bronze badges

Collectives™ on Stack Overflow

HTML Checkboxes in select list

6 Answers 6

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related