Question

如何使用Jquery绑定下拉列表以及复选框值和多选选项。我正在尝试过滤子类别，同时选择类别，但值不在子类别下拉列表中绑定。请帮我解决这个问题。这是我的代码如下：

$.each(response.SubCategory, function (i, item) {
     //items += "<option value=\"" 
             + item.Value + "\"><input type=\"checkbox\">"
             + item.Text + "</option>"; items += "<option value=\""
             + item.Value + "\"><input type=\"checkbox\"></option>"; 
     //$("#SubCategory1").append("<li><a rel=external href=Category.html?ID=" 
             + item.Value + ">" + item.Text + "</li>"); 
     alert($("#SubCategory"));
});
$("#SubCategory").html(items);

Answer 1

.change（处理程序）

将事件处理程序绑定到“更改”JavaScript事件，或在元素上触发该事件。

如需帮助，请阅读以下内容，因为它非常清楚，并会对您有所帮助： -

http://api.jquery.com/change/

Answer 2

试试这个

 //In case You want to reset SubCategory dropdown 
 $('#SubCategory').find('option').remove().end();
 $.each(response.SubCategory, function (i, item) {
    $("#SubCategory").append("<option value=\"" + item.Value + "\"><input type=\"checkbox\"> </option>");
 });

Answer 3

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

＆＃13;

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

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

＆＃13;

下拉多选复选框

3 个答案: