Geek Answers Handbook

HTML flags in a favorite list

I am trying to create a list of checkboxes in a select list (e.g. for countries here: link text )

I use Asp.net MVC, so it should be clean / html & | JavaScript / jQuery. Is it possible? Or is there a ready-made version that I could download?

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>
+5
source share
6 answers

HTML select optgroup. - , . . CSS JavaScript, , , .

Microsoft "multiple", . :

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

CSS , "active". , .

+5

- CSS, CSS 2:

<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

+5

js- , 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>

DEMO

+3

, , :

HTML, div, LOTS , , (, )...

- MVC, , - JQuery? , , , , ( flash silverlight, ).

+1

, ,

.ms_selectList{ display: none; }

, ms_selectList

jquery - , ms_selectList , div .

jquery - ,

$(document).ready(function(){

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

})
+1

This is not a standard HTML form control; it was specially designed by developers.

I do not know what existing open source solutions exist that will reproduce this behavior for you. I'm afraid it is unlikely that you can do this without much effort than it will cost.

0
source

More articles:


All Articles