Jquery複数選択ドロップダウンリストプラグイン jquery multiselect機能の紹介とuse_jquery

複数選択が必要で、インターネットで次のプラグインを見つけました: multiselect
https://github.com/ehynds/jquery-ui-multiselect-widget
これについては紹介がありますcsdn ブログのプラグイン、および多くの子供用靴 誰もがこの質問をしたことがありますが、選択された値を取得するにはどうすればよいでしょうか?いい質問ですね。私もデモを見ているときにこの問題を発見しました（笑）。

このプラグインについて簡単に説明しましょう:
jquery-multiselect は Jquery-ui コンポーネント システムに基づいています。
そのため、使用する場合は、まず jquery-ui に関連する js と css をインポートする必要があります。
機能
•ラベルのクリックによるチェックボックス グループの選択をサポートします。
•選択などのヘッダー オプション。 all/cancel すべて選択/閉じる機能
• 5 つの異なるイベント コールバック関数をサポートします。
• 選択した項目をリスト モードで表示し、最大表示値を設定できます。 •便利 位置、グラデーション速度、スクロールコンテナの高さ、リンクテキスト、テキストボックスのデフォルトの内容などを変更します。
効果は以下のようになります:

上記の画像効果のコード:
html コード:

コードをコピー コードは次のとおりです:

オプション 1
オプション 2
オプション 3
オプション 4 value="option5" >オプション 5
オプション 6
オプション 7 ;
<オプション値="オプション8">オプション8
<オプション値="オプション9">オプション9 >オプション 10
<オプション値="オプション11">オプション11
<オプション値="オプション12">オプション12 ;/select>



複数選択プラグインを呼び出すコード:

コードをコピー

コードは次のとおりです。 $(function(){ $("select").multiselect({ noneSelectedText: "==選択してください== ,

checkAllText: "すべて選択" ,

uncheckAllText: 'すべて選択を解除',
selectedList:4
})
}); があります。 multiselect を呼び出すときに多くのパラメーターがあり、それが公式のものだと思います。ドキュメントは非常に詳細であり、E-text を知っている学生は読むことができます。
さて、ここで私たちが最も懸念している質問が、選択された値を取得する方法でしょうか?

公式ドキュメントには、選択コントロールで選択された項目の値を取得する方法が見つかりません。ソースコードを読んだところ、バージョンは 1.14pre でした。本当に見つからない。

しかし、このプラグインは自分で DIY できます。とても簡単です！
まず、選択した値のリストを記録する変数を宣言します。スクリーンショットを撮ります。

その後、ソース コードにこのメソッドがテキストを取得するために使用されていることがわかります。ユーザーが選択したアイテムを使って、簡単な DIY を考えました。





次に、コードにメソッドを追加します。

コードをコピー
コードは次のとおりです:

MyValues:function(){ return multiValues; } OK、プラグの DIYで完成しました。ページでの呼び出しは次のとおりです:

コードをコピー

コードは次のとおりです:

function showValues() { var valuestr = $("#sela").multiselect("MyValues"); alert(valuestr); はい、OK ！

DIY コードとデモについては、

添付ファイル
をご覧ください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：IE 6/7/8のドロップダウンボックスの幅がselected_jqueryの場合、オプションが表示を超えて完全に表示されない問題をjQueryで解決次の記事：IE 6/7/8のドロップダウンボックスの幅がselected_jqueryの場合、オプションが表示を超えて完全に表示されない問題をjQueryで解決

関連記事

続きを見る

• Bootstrap リスト グループ コンポーネントの詳細な分析
• JavaScript関数のカリー化の詳細説明
• JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)
• Angularjs は WeChat UI (weui) を統合します
• JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル

福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！

私たちについて免責事項Sitemap

© php.cn All rights reserved