带复选框的多选下拉菜单答案

【问题标题】：Multi select drop down with checkbox带复选框的多选下拉菜单
【发布时间】：2017-05-14 19:07:07
【问题描述】：

谁能帮我实现带有复选框的多选下拉菜单？我在下面提到了链接示例。 http://www.codexworld.com/multi-select-dropdown-list-with-checkbox-jquery/ 上面提供的示例的问题是只有硬编码选项填充在下拉列表中。页面加载时我需要一个空的下拉菜单。选项将根据 Ajax 调用响应数据分配，即动态列表将来自服务器。此外，每次服务器调用和响应不同的事件/场景时，下拉列表都必须刷新。

【问题讨论】：

到目前为止你尝试了什么？？？你的代码在哪里
我相信这在here之前已经回答了
jquery multiselect reload的可能重复

标签： javascript jquery html

【解决方案1】：

您可以尝试以下示例代码作为启动：

<select id="ddlId"></select>

$.ajax({
   url: 'apiurl',
   type: 'GET',
   dataType: 'json',
   success: function(data) {
      var dataObj=JSON.parse(data);

      var optionHtml="";
      for(var i=0;i<dataObj.length;i++){
         optionHtml+='<option value="'+dataObj[i].ValueField+'">'+dataObj[i].TextField+'</option>';
      }

      $("#ddlId").html(optionHtml);

      $('#ddlId').multiselect();
   }   
});

【讨论】：

【解决方案2】：

您可以按照下面的代码并使用 jquery / ajax 获得带有复选框的多选下拉菜单。此外，您应该添加 jquery 来处理这个程序。如果您对此有任何疑问，请发表评论

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

<script>
	var expanded = false;
	function showCheckBoxes(){
	
	var checkboxes = document.getElementById("checkboxes");
	if(!expanded){
		checkboxes.style.display = "block";
		expanded = true;
	
	}else{
		checkboxes.style.display = "none";
		expanded = false;
	
	}
	
	}
	
</script>
	
	
	<script>

            function getcategory() {

                $.ajax({
                    type: "GET",
                    url: 'https://jsonplaceholder.typicode.com/posts',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    cache: false,
                    success: function (data) {
						var checkboxes = document.getElementById("checkboxes");
                        for (var i = 0; i < data.length; i++) {
							
							var node = document.createElement('div');        
							node.innerHTML = '<label id="'+ data[i].id +'"><input type="checkbox"  id="'+ data[i].id +'"/>'+data[i].id +'</label>';       
						    document.getElementById('checkboxes').appendChild(node);

                        }

                    },
                    error: function (msg) {

                        alert("error" + msg);
                    }

                });
            }

        </script>

<style>
.multiselect {
	width: 200px;
}
.selectBox {
	position: relative;
}

.selectBox select {
	width: 100%;
	font-weight: bold;
	
}
#checkboxes{
	display: none;
	border: 1px #dadada solid;
}
#checkboxes label {
	display: block;
}
#checkboxes label:hover {
	background-color : #1e90ff;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body onload="getcategory();">

<div>
	<div class="multiselect">
		<div class="selectbox" onclick="showCheckBoxes()">
			<select>
				<option>Select option</option>
			</select>
			
			<div class="overSelect"></div>
	
		</div> 
		
		<div id="checkboxes">
			
		</div>
		
	</div>

</div>

</body>
</html>

【讨论】：

【解决方案3】：

<select multiple>

/*for without holding ctrl/command key*/

$('option').mousedown(function(e) {
    e.preventDefault();
    var originalScrollTop = $(this).parent().scrollTop();
    console.log(originalScrollTop);
    $(this).prop('selected', $(this).prop('selected') ? false : true);
    var self = this;
    $(this).parent().focus();
    setTimeout(function() {
        $(self).parent().scrollTop(originalScrollTop);
    }, 0);
    
    return false;
});

select {
  width: 400px;
  padding: 8px 16px;
}
select option {
  font-size: 14px;
  padding: 8px 8px 8px 28px;
  position: relative;
  color: #999;
}
select option:before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  top: 0;
  bottom: 0;
  margin: auto;
  left: 0px;
  border: 1px solid #ccc;
  border-radius: 2px;
  z-index: 1;
}
select option:checked:after {
  content: attr(title);
  background: #fff;
  color: black;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 8px 8px 8px 28px;
  border: none;
}
select option:checked:before {
  border-color: blue;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMC42MSA4LjQ4Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6IzNlODhmYTt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPkFzc2V0IDg8L3RpdGxlPjxnIGlkPSJMYXllcl8yIiBkYXRhLW5hbWU9IkxheWVyIDIiPjxnIGlkPSJfMSIgZGF0YS1uYW1lPSIxIj48cmVjdCBjbGFzcz0iY2xzLTEiIHg9Ii0wLjAzIiB5PSI1LjAxIiB3aWR0aD0iNSIgaGVpZ2h0PSIyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0Ljk3IDAuMDEpIHJvdGF0ZSg0NSkiLz48cmVjdCBjbGFzcz0iY2xzLTEiIHg9IjUuMzYiIHk9Ii0wLjc2IiB3aWR0aD0iMiIgaGVpZ2h0PSIxMCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNC44NiAtMy4yNikgcm90YXRlKDQ1KSIvPjwvZz48L2c+PC9zdmc+);
  background-size: 10px;
  background-repeat: no-repeat;
  background-position: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select multiple>
  <option title="Option 1">Option 1</option>
  <option title="Option 2">Option 2</option>
  <option title="Option 3">Option 3</option>
  <option title="Option 4">Option 4</option>
  <option title="Option 5">Option 5</option>
  <option title="Option 6">Option 6</option>
  <option title="Option 7">Option 7</option>
  <option title="Option 8">Option 8</option>
  <option title="Option 9">Option 9</option>
  <option title="Option 10">Option 10</option>
  <option title="Option 11">Option 11</option>
  <option title="Option 12">Option 12</option>
  <option title="Option 13">Option 13</option>
  <option title="Option 14">Option 14</option>
</select>

【讨论】：