jquery UI Multiselect Widget

我一直在搞這個小部件（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>

來源

2013-05-07 ac12

僅供參考，即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

嘗試下面的代碼。我已經創建了一個示例Fiddle供您參考。

相當多的你的網頁的HTML代碼沒有直接連接到渲染多選jQuery選擇的分組順序的問題，所以我已經離開它下面的代碼：

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

希望這有助於解決您的問題和任何其他有類似問題的人。

來源

2014-03-08 01:23:50

檢查你的元素名稱，當它說多個時，它必須是一個數組。

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

來源

2015-11-24 14:44:42

jquery UI Multiselect Widget

回答

相關問題