Html 多选下拉框

浏览数：25 / 时间：2015年06月09日

1.css文件 span.dropList {display:inline-block; height:20px;border:1px solid #ccc; cursor:pointer; background:url(../images/xj.png) #fff no-repeat center right; font-size:12px; line-height:20px;padding-right:10px; position:relative;} span.dropList .CheckList {width:150px;height:200px;overflow:auto; border:1px solid #ccc; position:absolute; background-color:#fff; z-index:999;left:0px; display:none;padding:5px; line-height:24px; cursor:default;} span.dropList .CheckList input[type=checkbox] {margin-left:10px;} span.dropList .CheckList i {font-style:normal; display:inline-block; width:100%;float:left;} span.dropList .CheckList em {font-style:normal; display:inline-block; width:100%;float:left; margin-bottom:10px;} span.dropList:hover .CheckList{display:block;} span.dropList input { font-weight:normal;border:0px}

2.页面 <span class="dropList" > <input id="<%="mulSelect"+item.Value %>" name="selectValues" type="text" value="<%=defaultList.Count()>0?string.Join(",",defaultList):"--请选择--" %>" /> <div class="CheckList"> <em><input type="checkbox" name="<%="allCheck"+item.Value %>" /> 全选</em> <% if (dataList != null) { foreach (var dataItem in dataList) { %>

<i> <input type="checkbox" name="<%="chk"+item.Value %>" value="<%=dataItem.BM %>" <%=defaultList.Contains(dataItem.BM)==true?"checked=‘checked‘":"" %> /><%=dataItem.MC %></i>

<% } } %>

}) //单选 $("input[name=‘<%="chk"+item.Value%>‘]").click(function () { //获取选中值 var arry = []; //结果数组 //获取所有选中值 $("input[name=‘<%="chk"+item.Value%>‘]").each(function () { if ($(this).attr("checked") == "checked") { arry.push($(this).val()); } }) //文本框赋值 if (arry.length > 0) { $(‘#<%="mulSelect"+item.Value %>‘).val(arry.toString()); } else { $(‘#<%="mulSelect"+item.Value %>‘).val("--请选择--"); }

}) });

</script> </div> </span> 3.JS取值 function SubmitSearch() { var bm = ‘<%=Request.QueryString["Bm"].ToString()%>‘ //指标编码 var showRule = new Array(); //显示规则 $("select").each(function () { var id = $(this).attr("id").substring(6, $(this).attr("id").length); var value = $(this).val();

//规则模型，方便序列化 var ruleModel = { Name: id, Type: "ComboBox", Value: value } showRule.push(ruleModel); })

$("input[name=selectValues]").each(function () { var id = $(this).attr("id").substring(9, $(this).attr("id").length); var value = $(this).val();

//规则模型，方便序列化 var ruleModel = { Name: id, Type: "GridLookup", Value: value } showRule.push(ruleModel); }) var json = JSON.stringify(showRule); //json序列化 var rule = encodeURI(json); //url加密 //创建form var temp = document.createElement("form"); temp.action = "View.aspx?Bm=" + bm; temp.method = "post"; //创建隐藏域 var myInput = document.createElement("input"); myInput.setAttribute("name", "Value"); myInput.setAttribute("value", rule); myInput.setAttribute("type", "hidden"); temp.appendChild(myInput);

document.body.appendChild(temp); temp.submit(); //提交表单 document.body.removeChild(temp); //移除Form

//$.post("View.aspx?Bm=" + bm, { Value: rule }); //JQpost 异步无刷新 } 注：JQ的 get post ajax 方法

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

Html 多选下拉框