Want to add drop down with checkbox for all items(i.e. multi-selector drop down)

Question

enter image description here

In the above picture,there has a drop down for "Type of learning material:". I want to add a multi-selector drop down[drop down with a checkbox for all items] for the "Type of learning material:" Can anyone help me? My code snippets are ->

form#form1 #s00{
    padding: 5px 25px 5px 5px;
    width: 300px;
    border: 1px solid rgba(0,0,0,0.2);
}

form#form1 #srchMore{
    margin-left:-27px;
    cursor:pointer;
    color:#ccc;
}

form#form1 #srchMore:hover{color:#0ac;}

form#form1 .srchMoreAct{color:#333;}

form#form1 #srchMoreOpt{
    width: 350px;
padding: 10px;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
border: 2px solid rgba(0, 0, 0, 0.2);
z-index: 9999;
position: absolute;
background-color: white;
top: 150px;
left: 600px;
}


form#form1 .hid{
    display:none;
}

form#form1 #srchMoreOpt .exi{float:right; padding:0px 4px; font-family:'Arial'; cursor:pointer; background:#ccc; color:#666;}
form#form1 #srchMoreOpt .exi:hover{background:#0ac; color:#fff;}


#aspect_discovery_SimpleSearch_field_filtertype_1{
 display: hidden;
}

form#form1 #srchMoreOpt > div{
 padding:5px;
}

<div id="srchMoreOpt" class="hid">
    <span class="exi" onClick="srchMoreActive(false)">x</span>


    <!--Author-->
       <div>
    <input type="hidden" name="filtertype_1" value="author" />
    <input type="hidden" name="filter_relational_operator_1" value="contains" />
    <label> Author: </label>
    <input name="filter_1" type="text" /> <br></br>
       </div>
    <!--Author-->

    <!--Type of Learning Material-->
       <div>
    <input type="hidden" name="filtertype_2" value="typeoflm" />
    <input type="hidden" name="filter_relational_operator_2" value="equals" />
    <label> Type of Learning Material: </label>

    <select id="aspect_discovery_SimpleSearch_field_filtertype_2" class="ds-select-field" name="filter_2">
        <option value="" selected="selected"> … </option>
        <option value="book" xmlns="http://di.tamu.edu/DRI/1.0/"> Book </option>
        <option value="videoLecture" xmlns="http://di.tamu.edu/DRI/1.0/"> Video Lecture </option>
        <option value="audioLecture" xmlns="http://di.tamu.edu/DRI/1.0/"> Audio Lecture </option>
        <option value="exercise" xmlns="http://di.tamu.edu/DRI/1.0/"> Exercise </option>
        <option value="solution" xmlns="http://di.tamu.edu/DRI/1.0/"> Solution </option>
        <option value="quiz" xmlns="http://di.tamu.edu/DRI/1.0/"> Quiz </option>
        <option value="animation" xmlns="http://di.tamu.edu/DRI/1.0/"> Animation </option>
        <option value="simulation" xmlns="http://di.tamu.edu/DRI/1.0/"> Simulation </option>
        <option value="classNotes" xmlns="http://di.tamu.edu/DRI/1.0/"> Class Notes </option>
        <option value="dataset" xmlns="http://di.tamu.edu/DRI/1.0/"> DataSet </option>
        <option value="experiment" xmlns="http://di.tamu.edu/DRI/1.0/"> Experiment </option>
        <option value="selfassesment" xmlns="http://di.tamu.edu/DRI/1.0/"> Self Assessment </option>
    </select>  
       </div>  
    <!--Type of Learning Material-->


    <!--Difficulty Level-->
       <div>
    <input type="hidden" name="filtertype_3" value="difficultylevel" />
    <input type="hidden" name="filter_relational_operator_3" value="equals" />
    <label> Difficulty Level: </label>

    <select id="aspect_discovery_SimpleSearch_field_filtertype_3" class="ds-select-field" name="filter_3">
        <option value="" selected="selected"> … </option>
        <option value="default" xmlns="http://di.tamu.edu/DRI/1.0/"> Default </option>
        <option value="very easy" xmlns="http://di.tamu.edu/DRI/1.0/"> Very Easy </option>
        <option value="easy" xmlns="http://di.tamu.edu/DRI/1.0/"> Easy </option>
        <option value="medium" xmlns="http://di.tamu.edu/DRI/1.0/"> Medium </option>
        <option value="difficult" xmlns="http://di.tamu.edu/DRI/1.0/"> Difficult </option>
        <option value="very difficult" xmlns="http://di.tamu.edu/DRI/1.0/"> Very Difficult </option>
    </select>   <br></br>
       </div>
    <!--Difficulty Level-->


    <!--Education Level-->
       <div>
    <input type="hidden" name="filtertype_4" value="educationlevel" />
    <input type="hidden" name="filter_relational_operator_4" value="equals" />
    <label> Education Level: </label>

    <select id="aspect_discovery_SimpleSearch_field_filtertype_4" class="ds-select-field" name="filter_4">
        <option value="" selected="selected"> … </option>
        <option value="preschool" xmlns="http://di.tamu.edu/DRI/1.0/"> Pre-School </option>
        <option value="class1" xmlns="http://di.tamu.edu/DRI/1.0/"> Class I </option>
        <option value="class2" xmlns="http://di.tamu.edu/DRI/1.0/"> Class II </option>
        <option value="class3" xmlns="http://di.tamu.edu/DRI/1.0/"> Class III </option>
        <option value="class4" xmlns="http://di.tamu.edu/DRI/1.0/"> Class IV </option>
        <option value="class5" xmlns="http://di.tamu.edu/DRI/1.0/"> Class V </option>
        <option value="class6" xmlns="http://di.tamu.edu/DRI/1.0/"> Class VI </option>
        <option value="class7" xmlns="http://di.tamu.edu/DRI/1.0/"> Class VII </option>
        <option value="class8" xmlns="http://di.tamu.edu/DRI/1.0/"> Class VIII </option>
        <option value="class9" xmlns="http://di.tamu.edu/DRI/1.0/"> Class IX </option>
        <option value="class10" xmlns="http://di.tamu.edu/DRI/1.0/"> Class X </option>
        <option value="class11" xmlns="http://di.tamu.edu/DRI/1.0/"> Class XI </option>
        <option value="class12" xmlns="http://di.tamu.edu/DRI/1.0/"> Class XII </option>
        <option value="UG" xmlns="http://di.tamu.edu/DRI/1.0/"> Under Graduate </option>
        <option value="PG" xmlns="http://di.tamu.edu/DRI/1.0/"> Post Graduate </option>
        <option value="Doctoral" xmlns="http://di.tamu.edu/DRI/1.0/"> Doctoral </option>
    </select>  
       </div>
    <!--Education Level-->

    <br></br>

       <div>
          <input id="aspect_discovery_SimpleSearch_field_submit_apply_filter" class="ds-button-field discovery-apply-filter-button" type="submit" value="Apply" name="submit_apply_filter"></input>
       </div>

</div>

score 2 · Accepted Answer · answered Feb 26 '15 at 11:42

If you using custom raw JS pop up then it's very difficult when overlaps of layers are appeared. I suggest some simple codes to make out of it. See http://jsfiddle.net/uxs1oc4b/ or bellow:

function actDdrp(e){
    e=document.getElementById(e.parentNode.getAttribute('id'));
    if(e.style.height!='auto') e.style.height="auto";
    else e.style.height='32px';
}

.ddrp {border:1px solid #ccc; width:250px; height:32px; overflow:hidden; margin-bottom:10px;}
.ddrp p{margin:0; padding:7px;}
.ddrp p:first-child{cursor:pointer; -webkit-user-select:none; -moz-user-select:none; user-select:none;}
.ddrp p:first-child span{float:right; color:#999;}

<div class="ddrp" id="ddrp_1">
    <p onClick="actDdrp(this)">Types <span>&#9660;</span></p>
    <p><input type="checkbox" name="audio" /> Audio</p>
    <p><input type="checkbox" name="video" /> Video</p>
</div>

<div class="ddrp" id="ddrp_2">
    <p onClick="actDdrp(this)">Category <span>&#9660;</span></p>
    <p><input type="checkbox" name="cat1" /> Cat 1</p>
    <p><input type="checkbox" name="cat2" /> Cat 2</p>
    <p><input type="checkbox" name="cat3" /> Cat 3</p>
</div>

I my code you can use multiple drop-down like this. Just use `class="ddrp"`and make sure about the id like `ddrp_1`. In JavaScript `e.style.height='32px'` used for toggle expend of drop-down, if you change it make sure to change the CSS `height:32px;` also. I used `user-select:none;` to restrict mouse double click selection. — Subhasom, Feb 26 '15 at 11:48

score 0 · Answer 2 · edited May 23 '17 at 11:58

0

use the jquery MultiSelect Widget

Demo here:

http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/

possible duplicate of:

How to use Checkbox inside Select Option

edited May 23 '17 at 11:58

Community

1
1

answered Feb 26 '15 at 10:18

Grushton94

603
1
7
17

score 0 · Answer 3 · answered Feb 26 '15 at 10:52

Yes you definitely can! Use the below code snippet for reference.

var checkList = document.getElementById('list1');
var items = document.getElementById('items');
        checkList.getElementsByClassName('anchor')[0].onclick = function (evt) {
            if (items.classList.contains('visible')){
                items.classList.remove('visible');
                items.style.display = "none";
            }
            
            else{
                items.classList.add('visible');
                items.style.display = "block";
            }
            
            
        }

        items.onblur = function(evt) {
            items.classList.remove('visible');
        }

.dropdown-check-list {
  display: inline-block;
}
.dropdown-check-list .anchor {
  position: relative;
  cursor: pointer;
  display: inline-block;
  padding: 5px 50px 5px 10px;
  border: 1px solid #ccc;
}
.dropdown-check-list .anchor:after {
  position: absolute;
  content: "";
  border-left: 2px solid black;
  border-top: 2px solid black;
  padding: 5px;
  right: 10px;
  top: 20%;
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
.dropdown-check-list .anchor:active:after {
  right: 8px;
  top: 21%;
}
.dropdown-check-list ul.items {
  padding: 2px;
  display: none;
  margin: 0;
  border: 1px solid #ccc;
  border-top: none;
}
.dropdown-check-list ul.items li {
  list-style: none;
}

<body>
    <div id="list1" class="dropdown-check-list" tabindex="100">
        <span class="anchor">Select Fruits</span>
        <ul id="items" class="items">
            <li><input type="checkbox" />Apple </li>
            <li><input type="checkbox" />Orange</li>
            <li><input type="checkbox" />Grapes </li>
            <li><input type="checkbox" />Berry </li>
            <li><input type="checkbox" />Mango </li>
            <li><input type="checkbox" />Banana </li>
            <li><input type="checkbox" />Tomato</li>
        </ul>
    </div>
</body>

Want to add drop down with checkbox for all items(i.e. multi-selector drop down)

3 Answers3