我一直在搞这个小部件(http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/basic.htm)几个小时,现在没有进展。我需要下拉功能,就像上面链接中的第二个示例一样。截至目前,下拉菜单打开,当我点击复选框时,它会自动关闭。我可以通过键盘访问下拉菜单的字段,按下回车键可以选择所需的选项。但是,当我点击该选项时,整个下拉框都隐藏起来。此外,该下拉菜单落在其下方的联系表单的其余部分之后。我试过z-index没有运气。事先谢谢你们,这让我疯狂。下面是我的代码:jquery UI Multiselect Widget
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>#attributes.title#</title>
<META NAME="TITLE" CONTENT="#attributes.title#"/>
<META NAME="keywords" content="#attributes.keywords#" />
<META NAME="description" content="#attributes.description#" />
<script type="text/javascript" src="../ddcl/jquery-1.6.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="/jQuery/Fancy/style.css" />
<link rel="stylesheet" type="text/css" href="/jQuery/Fancy/jquery.fancybox-1.3.1.css">
<link rel="stylesheet" href="/Themes/PrintCenter/style.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/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript" src="../ddcl/jquery.multiselect.js"></script>
<cfinclude template="/Includes/header_head.cfm">
</head>
和HTML
<cfform action="/Task/Form/ProcessForm.cfm" id="print-request-form" method="post" name="printrequestform">
<span>Select Print Material</span>
<select name="example-optgroup" multiple="multiple" size="5" id="dropdowns">
<optgroup label="Tri-Fold Brochure">
<option value="option1">500 units</option>
<option value="option2">1000 units</option>
<option value="option3">1500 units</option>
</optgroup>
<optgroup label="Group Two">
<option value="option4">500 units</option>
<option value="option5">1000 units</option>
<option value="option6">1500 units</option>
<option value="option7">2000 units</option>
</optgroup>
</select><label><span>Full Name:</span> <cfinput class="input-text" maxlength="100" message="Please enter a valid name." name="name" required="yes" size="30" type="text" validate="maxlength"></cfinput></label></cfform>
脚本
<script type="text/javascript">
$("#dropdowns").multiselect({
selectedList: 2 // 0-based index
});</script>
仅供参考,即widget是未完成的,应该在未来的jQueryUI的版本作为软件包的一部分提供,但现在,它与我可以看到 – SpYk3HH 2013-05-07 20:30:44
谢谢你的快速反应相当多的错误百出。你对于所需的菜单风格还有其他建议吗? – ac12 2013-05-07 20:31:56
不是真的,这是一个不错的选择,但是你将需要jQueryUI库来合并'.widget'(我没有看到你的链接)。您还需要确保您的布局“**完全相似**”。查看页面源代码以查看确切的布局 – SpYk3HH 2013-05-07 20:40:29