jquery UI 多选小部件答案

【问题标题】：jquery UI Multiselect Widgetjquery UI 多选小部件
【发布时间】：2013-05-01 22:13:37
【问题描述】：

我已经搞砸了这个小部件 (http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/basic.htm) 几个小时了，但没有任何进展。我需要下拉菜单像上面链接中的第二个示例一样运行。截至目前，下拉菜单打开，当我点击复选框时，它会自动关闭。我可以使用键盘访问下拉列表的字段，然后按回车键将选择所需的选项。但是，当我用鼠标单击该选项时，整个下拉菜单会自行隐藏。此外，下拉列表位于其下方的其余联系表单之后。我尝试了 z-index 没有运气。提前谢谢你们，这让我发疯了。以下是我的代码：

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

【问题讨论】：

仅供参考，该小部件尚未完成，应该在未来的 jQueryUI 版本中作为包的一部分提供，但现在，它充满了我可以看到的很多错误
感谢您的快速回复。对于所需的菜单样式，您还有其他建议吗？
不是真的，这是一个不错的选择，但是您仍然需要 jQueryUI 库来合并 .widget（我在您的链接中没有看到）。您还需要确保您的布局“完全与他们的相似。查看页面源代码以查看确切的布局
这不是 jQueryUI 库吗？
哦，是的，大声笑，ddnt早点看到它

标签： jquery html jquery-ui drop-down-menu widget

【解决方案1】：

试试下面的代码。我创建了一个示例 Fiddle 供您查看它的实际效果。

你的很多页面html代码没有直接连接Multiselect JQuery选择器的Grouped order的渲染问题，所以我在下面的代码中省略了：

<script type="text/javascript">
  $(function(){
     $("select").multiselect();
  });
</script>

<cfform action="/Task/Form/ProcessForm.cfm" id="print-request-form" method="post"     name="printrequestform">
    <h1>Optgroups Example</h1>
    <h3>ehynds / jquery-ui-multiselect-widget</h3>   
 <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>

我希望这对您和遇到类似问题的其他人有所帮助。

【讨论】：

【解决方案2】：

检查你的元素名称，当它说多个时，它必须是一个数组。

<select name="my_options[]" multiple class="multiselect">

【讨论】：