javascript - 想要为所有项目添加带有复选框的下拉菜单（即多选择器下拉菜单）

Question

在此处输入图像描述

在上图中，有一个“学习资料类型：”的下拉菜单。我想为“学习材料的类型：”添加一个多选下拉菜单[下拉所有项目的复选框] 有人可以帮助我吗？我的代码片段是->

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

如果您使用自定义原始 JS 弹出，那么当出现层重叠时非常困难。我建议使用一些简单的代码来制作它。请参阅http://jsfiddle.net/uxs1oc4b/或以下内容：

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>

score 0 · Accepted Answer

使用 jquery MultiSelect 小部件

演示在这里：

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

可能的重复：

如何在选择选项中使用复选框

score 0 · Accepted Answer

是的，你绝对可以！使用下面的代码片段作为参考。

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>

javascript - 想要为所有项目添加带有复选框的下拉菜单（即多选择器下拉菜单）

3 回答 3

Related

Reference