Search code examples
javascriptjqueryhtmlcssdspace

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

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>

Solution

  • 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>