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 つの異なるイベント コールバック関数をサポートします。
• 選択した項目をリスト モードで表示し、最大表示値を設定できます。 •便利 位置、グラデーション速度、スクロールコンテナの高さ、リンクテキスト、テキストボックスのデフォルトの内容などを変更します。
効果は以下のようになります:

オプション 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 コードとデモについては、

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

関連ラベル：

ドロップダウンリスト 複数の選択肢

ソース：php.cn

前の記事：IE 6/7/8のドロップダウンボックスの幅がselected_jqueryの場合、オプションが表示を超えて完全に表示されない問題をjQueryで解決 次の記事：page_javascript スキルの先頭までスクロールしたときに div が先頭に固定されるコード例

このウェブサイトの声明

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

著者別の最新記事

• NullPointerException とは何ですか?どのように修正すればよいですか?
  2024-10-22 09:46:29
• 初心者からプログラマーへ: 旅は C の基礎から始まります
  2024-10-13 13:53:41
• PHP による Web 開発のロックを解除する: 初心者ガイド
  2024-10-12 12:15:51
• C の謎を解く: 新人プログラマーのための明確でシンプルな道
  2024-10-11 22:47:31
• コーディングの可能性を解き放つ: まったくの初心者のための C プログラミング
  2024-10-11 19:36:51
• 内なるプログラマーを解き放つ: まったくの初心者のための C
  2024-10-11 15:50:41
• C で生活を自動化する: 初心者向けのスクリプトとツール
  2024-10-11 15:07:41
• PHP を簡単に: Web 開発の最初のステップ
  2024-10-11 14:21:21
• Python で何でも構築: 創造性を解き放つための初心者ガイド
  2024-10-11 12:59:11
• コーディングの鍵: 初心者のための Python の力を解き放つ
  2024-10-11 12:17:31

最新の問題

3 レベル階層のカスタム分類を使用して woocommerce 関連製品を選択します 「スポーツ」というカスタム分類を持つ woocommerce ストアがあります。分類には、親、子、子という 3 つのレベルがあります。たとえば、屋内スポーツ > アリーナ ス...

から 2024-04-06 20:05:30

0

1

544

複数のルートで宣言されたワーカープールは、しきい値を気にせずに CPU 使用率を維持できますか CPU を集中的に使用するタスクを処理するワーカープールを備えた Node.js システムを見つけたいと考えていますが、複数のルートにわたる CPU 使用率については少し混乱してい...

から 2024-04-06 19:54:23

0

1

444

MySQL: 「<ここの変数またはサブクエリ> として...からテキストを選択します」 次のデータを含む次のテーブルがあります: id text language 1 german text german 2 english text english 私が望むのは、次...

から 2024-04-06 19:25:54

0

2

529

Web アプリケーションでバージョン情報を表示するためのベスト プラクティスは何ですか? Webアプリケーションを開発しています。 Web アプリケーションでバージョン情報を表示するためのベスト プラクティスは何ですか?私はセマンティック バージョニングを使用しており、...

から 2024-04-06 19:13:16

0

2

476

Web サイトから入力要素を取得できません そこで、Twitter から入力要素を取得しようとしていますが、それを実行すると、ノード ターミナルでこのようなエラーが表示され続け、その結果、このコードによって作成されたブラウザ...

から 2024-04-06 18:59:57

0

1

442

関連トピック

詳細>

• Tomcatの中国語文字化けを解決する方法
• Linuxでフォルダを削除する
• xenserver
• 画像上のテキストを変更する方法
• JavaはWebサービスを呼び出します
• oppo11で画面をロックする方法
• 携帯電話の番号が空白になる理由は何ですか?
• Wordでインデックスを作成する方法

人気のおすすめ

• jsはどういう意味ですか
• jsで文字列を配列に変換するにはどうすればよいですか?
• JavaScriptを使用してページを更新する方法
• sqrt関数の使い方
• js配列内の項目を削除する方法

人気のチュートリアル

詳細>

関連するチュートリアル

人気のおすすめ

最新のコース

• 
  最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)

  1421301
• 
  PHP 入門チュートリアル 1: 1 週間で PHP を学ぶ

  4265186
• 
  JAVA 初心者向けビデオチュートリアル

  2516597
• 
  Little Turtle のゼロベースの Python 学習入門ビデオ チュートリアル

  506250
• 
  PHP ゼロベースの入門チュートリアル

  861350

• 
  最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)

  1421301 回の学習
• 
  JAVA 初心者向けビデオチュートリアル

  2516597 回の学習
• 
  Little Turtle のゼロベースの Python 学習入門ビデオ チュートリアル

  506250 回の学習
• 
  Web フロントエンド開発の簡単な紹介

  215620 回の学習
• 
  PSビデオチュートリアルをゼロからマスターする

  886319 回の学習

• 
  [Web フロントエンド] Node.js クイック スタート

  7204 回の学習
• 
  海外のWeb開発フルスタックコースの完全なコレクション

  5606 回の学習
• 
  Go言語実践GraphQL

  4719 回の学習
• 
  550W ファンマスターが JavaScript をゼロから段階的に学習します

  673 回の学習
• 
  Python マスター Mosh、基礎知識ゼロの初心者でも 6 時間で始められる

  23762 回の学習

最新のダウンロード

詳細>

ウェブエフェクト

公式サイト

サイト素材

フロントエンドテンプレート

• [フォームボタン] jQuery エンタープライズ メッセージ フォームの連絡先コード
• [プレイヤーの特殊効果] HTML5 MP3 オルゴール再生効果
• [メニューナビゲーション] HTML5 クールなパーティクル アニメーション ナビゲーション メニューの特殊効果
• [フォームボタン] jQuery ビジュアル フォームのドラッグ アンド ドロップ編集コード
• [プレイヤーの特殊効果] VUE.JS 模倣 Kugou 音楽プレーヤー コード
• [html5特殊効果] 古典的な HTML5 プッシュ ボックス ゲーム
• [画像の特殊効果] 画像効果を追加または削減するための jQuery スクロール
• [フォトアルバム効果] CSS3 個人アルバム カバー ホバー ズーム効果

• [フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート
• [フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート
• [フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート
• [フロントエンドテンプレート] オンライン電子書籍ストア モールのウェブサイト テンプレート
• [フロントエンドテンプレート] IT テクノロジーがインターネット企業の Web サイト テンプレートを解決します
• [フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート

• [PNG素材] かわいい夏の要素のベクター素材 (EPS+PNG)
• [PNG素材] 4 つの赤い 2023 卒業バッジ ベクター素材 (AI+EPS+PNG)
• [バナー画像] 歌う鳥と花がいっぱいのカートデザイン春のバナーベクター素材（AI+EPS）
• [PNG素材] 金色の卒業帽ベクター素材（EPS+PNG）
• [PNG素材] 黒と白のスタイルの山アイコン ベクター素材 (EPS+PNG)
• [PNG素材] 異なる色のマントと異なるポーズを持つスーパーヒーローのシルエットベクター素材（EPS+PNG）
• [バナー画像] フラット スタイルの植樹祭バナー ベクター素材 (AI+EPS)
• [PNG素材] 9つのコミックスタイルの爆発するチャットバブルベクター素材（EPS+PNG）

• [フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート
• [フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート
• [フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート
• [フロントエンドテンプレート] オンライン電子書籍ストア モールのウェブサイト テンプレート
• [フロントエンドテンプレート] IT テクノロジーがインターネット企業の Web サイト テンプレートを解決します
• [フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート