如何在选定控件上使用 Jquery Multiselect 插件
Posted
技术标签:
【中文标题】如何在选定控件上使用 Jquery Multiselect 插件【英文标题】：How to use Jquery Multiselect plugin on selected controls 【发布时间】：2014-12-21 11:39:07 【问题描述】：我创建了一个用户控件，它显示带有复选框的下拉菜单。一切正常，但是当我在我的 asp.net 页面上使用此控件时，它会影响其他下拉控件。
我不想影响我网页上的其他控件。
我尝试在用户控件上添加内联多选样式但没有成功，其他控件仍然有效。
用户控制
<%@ Control Language="VB" AutoEventWireup="false" CodeFile="ucMultiSelect.ascx.vb" Inherits="ucMultiSelect" %>
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
.ui-multiselect padding:2px 0 2px 4px; text-align:left
.ui-multiselect span.ui-icon float:right
.ui-multiselect-single .ui-multiselect-checkboxes input position:absolute !important; top: auto !important; left:-9999px;
.ui-multiselect-single .ui-multiselect-checkboxes label padding:5px !important
.ui-multiselect-header margin-bottom:3px; padding:3px 0 3px 4px
.ui-multiselect-header ul font-size:0.9em
.ui-multiselect-header ul li float:left; padding:0 10px 0 0
.ui-multiselect-header a text-decoration:none
.ui-multiselect-header a:hover text-decoration:underline
.ui-multiselect-header span.ui-icon float:left
.ui-multiselect-header li.ui-multiselect-close float:right; text-align:right; padding-right:0
.ui-multiselect-menu display:none; padding:3px; position:absolute; z-index:10000; text-align: left
.ui-multiselect-checkboxes position:relative /* fixes bug in IE6/7 */; overflow-y:auto
.ui-multiselect-checkboxes label cursor:default; display:block; border:1px solid transparent; padding:3px 1px
.ui-multiselect-checkboxes label input position:relative; top:1px
.ui-multiselect-checkboxes li clear:both; font-size:0.9em; padding-right:3px
.ui-multiselect-checkboxes li.ui-multiselect-optgroup-label text-align:center; font-weight:bold; border-bottom:1px solid
.ui-multiselect-checkboxes li.ui-multiselect-optgroup-label a display:block; padding:3px; margin:1px 0; text-decoration:none
/* remove label borders in IE6 because IE6 does not support transparency */
* html .ui-multiselect-checkboxes label border:none
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery MultiSelect Widget Demo</title>
<%--<link rel="stylesheet" type="text/css" href="Styles/jquery.multiselect.css" />--%>
<%--<link rel="stylesheet" type="text/css" href="assets/style.css" />--%>
<%--<link rel="stylesheet" type="text/css" href="assets/prettify.css" />--%>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript" src="assets/prettify.js"></script>
<script type="text/javascript" src="Scripts/jquery.multiselect.js"></script>
<script type="text/javascript">
$(function ()
$("select").multiselect();
);
</script>
</head>
<body id="test">
<asp:ListBox ID="ListBox1" SelectionMode="Multiple" runat="server">
<asp:ListItem Text="A" Value="1"></asp:ListItem>
<asp:ListItem Text="B" Value="2"></asp:ListItem>
</asp:ListBox>
</body>
</html>
asp.net 页面
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<%@ Register src="ucMultiSelect.ascx" tagname="selectionCtrl" tagprefix="uc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem Text="A" Value="1"></asp:ListItem>
<asp:ListItem Text="B" Value="2"></asp:ListItem>
</asp:DropDownList>
<div>
<uc1:selectionCtrl ID="selectionCtrl1" runat="server" />
</div>
</form>
</body>
</html>
【问题讨论】：
我认为您提供的信息不足以让我们为您提供帮助？ - 您的自定义控件是如何构建的？您看到其他下拉菜单有哪些具体的“变化”？你有可以用来说明的 jsFiddle 示例吗？ 第一个下拉控件应该看起来像一个普通的 asp.net 控件，而不是我的用户控件。 【参考方案1】：您的用户控件不干净应该只包含所需标记的部分，因为您将用户控件放在aspx page 的正文部分中，它不应该包含html, head, body 标记。
如下所示更改 UserControl 请注意，我在绑定多选 $("#testUserControl select").multiselect(); 时使用了选择器 div id = testUserControl 这将仅限于 div#testUserControl 部分，您可以在任何地方应用类似的逻辑想。
<%@ Control Language="VB" AutoEventWireup="false" CodeFile="ucMultiSelect.ascx.vb" Inherits="ucMultiSelect" %>
<!--Below jquery api resources you can include in Master or Main page -->
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript" src="assets/prettify.js"></script>
<script type="text/javascript" src="Scripts/jquery.multiselect.js"></script>
<div id="testUserControl">
<asp:ListBox ID="ListBox1" SelectionMode="Multiple" runat="server">
<asp:ListItem Text="A" Value="1"></asp:ListItem>
<asp:ListItem Text="B" Value="2"></asp:ListItem>
</asp:ListBox>
</div>
<script type="text/javascript">
$(function()
$("#testUserControl select").multiselect(
noneSelectedText: "Select Options" //here you can set "noneSelectedText" that you want
);
);
</script>
【讨论】：
如何从 asp.net 页面设置 noneSelectedText？ 我用noneSelectedText 选项更新了答案。如果你想从 aspx 页面设置它，那么将脚本块移动到 aspx 页面。
我尝试将脚本块移动到 aspx 页面，但它不起作用。您能否提供一个示例。谢谢
确保没有选择任何列表项，当你取消选中所有时你能看到“选择选项”
我对 updatepanel 有一些问题，所以我将脚本移动到 Sys.WebForms.PageRequestManager.getInstance() 并且它工作正常。谢谢:)以上是关于如何在选定控件上使用 Jquery Multiselect 插件的主要内容，如果未能解决你的问题，请参考以下文章
在 Woocommerce 可变产品上获取 jQuery 中选定的变体价格