0

私はこのウィジェット ( http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/basic.htm ) を数時間いじっていますが、進歩はありません。上記のリンクの 2 番目の例のように機能するには、ドロップダウンが必要です。現在、ドロップダウンが開き、チェックボックスをクリックすると自動的に閉じます。キーボードでドロップダウンのフィールドにアクセスできます。Enter キーを押すと、目的のオプションが選択されます。しかし、オプションをマウスでクリックすると、ドロップダウン全体が非表示になります。また、ドロップダウンは、その下の連絡フォームの残りの部分よりも遅れています。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>
4

2 に答える 2

0

要素名を確認してください。複数ある場合は、配列でなければなりません。

<select name="my_options[]" multiple class="multiselect">
于 2015-11-24T14:44:42.940 に答える
0

以下のコードを試してください。実際の動作を確認できるように、 Fiddleの例を作成しました。

ページの HTML コードの多くは、Multiselect 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-08T01:23:50.303 に答える