web-dev-qa-db-ja.com

jQueryの複数選択ドロップダウンメニュー

私は簡単なhtmlマルチ選択ドロップダウンリストを持っています：

<select id="transactionType" multiple="multiple" size="10">
  <option value="ALLOC">ALLOC</option>
  <option value="LOAD1">LOAD1</option>
  <option value="LOAD2">LOAD2</option>
  <!-- etcetera... -->
</select>

Javascriptが無効になっているイベントでこのリストを引き続き使用したいのですが、javaScriptでは、リストを複数選択ドロップダウンリストとしてレンダリングしたいと思います。つまり、クリックされるまでリスト内の1つのアイテムのみを表示し、それから展開してxアイテムを表示し、スクロールを提供します。そこで、shiftまたはctrlを押しながら複数の要素を選択できます。

JQueryの新機能は http://jquery.com/ を検索することでしたが、必要なものがまだ見つかりませんでした。

EditStruts2ユーザーの場合、選択した回答は[]でURLエンコードされるため、struts2で問題が発生しますが、修正は非常に簡単です。 jquery.multiSelect.jsを開いて「[]」を検索し、文字列連結で使用される1つのインスタンスを削除するだけです。また、jQuery 1.4.4をバンドルしている1.3.2とは対照的に、jQuery 1.4.4を使用していますが、すべて正常に動作します。

jqueryjquery-uijquery-pluginsmulti-select
50
Quaternion

更新（2017）：次の2つのライブラリは、Javascriptで使用される最も一般的なドロップダウンライブラリになりました。これらはjQueryネイティブですが、AngularJS 1.xからBootstrapのカスタムCSSを使用するまでのすべてで動作するようにカスタマイズされています。 （ここでの最初の答えであるChosen JSは、人気で3位に落ちたようです。）

以下の必須スクリーンショット。

Select2： Select2

選択： Selectize

元の回答（2012）： Chosen library も役立つと思います。 jQuery、Prototype、MooToolsの各バージョンで利用可能です。

添付は、選択された状態で複数選択機能がどのように見えるかのスクリーンショットです。

Chosen library

82
Suman

私は会社のシンプルなマルチセレクトも探していました。私は、jQuery以外に大きな依存関係のない、シンプルで高度にカスタマイズ可能なものが必要でした。

自分のニーズに合ったものが見つからなかったので、自分でコーディングすることにしました。
本番で使用しています。

デモとドキュメントは次のとおりです。 loudev.com

貢献したい場合は、 github repository を確認してください

16
lou

  • ダウンロードjquery.multiselect

  • Jquery.multiselect.jsおよびjquery.multiselect.cssファイルを含めます

    <script src="jquery-ui-multiselect-widget-master/src/jquery.multiselect.js" type="text/javascript"></script> <link rel="stylesheet" href="jquery-ui-multiselect-widget-master/jquery.multiselect.css" />

  • 選択入力を入力します

  • 複数選択を追加する

    $('#' + Field).multiselect({ checkAllText: "Your text for CheckAll", uncheckAllText: "Your text for UncheckCheckAll", noneSelectedText: "Your text for NoOptionHasBeenSelected", selectedText: "You selected # of #" //The multiselect knows to display the second # as the total });

  • スタイルを変更できます

    ui-multiselect { //The button background:#fff !important; //background-color wouldn't work here text-align: right !important; } ui-multiselect-header { //The CheckAll/ UncheckAll line) background: lightgray !important; text-align: right !important; } ui-multiselect-menu { //The options text-align: right !important; }

  • 選択内容を再入力する場合は、更新する必要があります。

    $('#' + Field).multiselect('refresh');

  • 選択した値を取得するには（カンマ区切り）：

    var SelectedOptions = $('#' + Field).multiselect("getChecked").map(function () { return this.value; }).get();

  • 選択したすべての値をクリアするには：

    $('#' + Field).multiselect("uncheckAll");

9
Oranit Dar

erichynds dropdown multiselect を見て、膨大な量の設定とチューニングを行ってください。

3
sergejsvit

Selected.iを使用して、このリンクからすべてのファイルをダウンロードできます Chosen download Link

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link href="prism.css" rel="stylesheet" type="text/css" />
    <link href="chosen.css" rel="stylesheet" type="text/css" />
    <script src="jquery-2.1.4.min.js" type="text/javascript"></script>
    <script src="chosen.jquery.js" type="text/javascript"></script>
    <script src="prism.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $(".chzn-select").chosen();
        });
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>

<ion-view view-title="Profile">
<ion-content class="padding">

<div>
    <label class="item item-input">
        <div class="input-label">Enter Your Option</div>
            <select class="chzn-select" multiple="true" name="faculty" style="width:1000px;">
                <option value="Option 2.1">Option 2.1</option>
                <option value="Option 2.2">Option 2.2</option>
                <option value="Option 2.3">Option 2.3</option>
            </select>   
    </label>
</div>
</ion-content>
</ion-view> 
    </div>
    </form>
</body>
</html>

すべて同じファイル上のすべてのファイル

3
syed mhamudul hasan akash

JQueryプラグインに依存せずに独自のハッキングを行うこともできますが、遷移によって選択状態の情報が削除されるため、選択したアイテムを外部（JS）で追跡する必要があります。

<head>
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script>
  <script type='text/javascript'>
    $(window).load(function(){
      $('#transactionType').focusin(function(){
        $('#transactionType').attr('multiple', true);
      });
      $('#transactionType').focusout(function(){
        $('#transactionType').attr('multiple', false);
      });
    });>  
  </script>
</head>
<body>
  <select id="transactionType">
    <option value="ALLOC">ALLOC</option>
    <option value="LOAD1">LOAD1</option>
    <option value="LOAD2">LOAD2</option>
  </select>  
</body>
1
nmz787
<select id="mycontrolId" multiple="multiple">
   <option value="1" >one</option>
   <option value="2" >two</option>
   <option value="3">three</option>
   <option value="4">four</option>
</select>

var data = "1,3,4"; var dataarray = data.split(",");

$("#mycontrolId").val(dataarray);
1
wasay raza

チェックボックス付きの複数選択ドロップダウンメニューの実装にjQuery MultiSelectを使用しました。実装ガイドはこちらからご覧いただけます- チェックボックス付きの複数選択ドロップダウンリスト

実装は非常に簡単で、次のコードを使用するだけで済みます。

$('#transactionType').multiselect({
    columns: 1,
    placeholder: 'Select Transaction Type'
});
1
JoyGuru

あなたはこのようなことをしたいと考えています http://jsfiddle.net/robert/xhHkG/

$('#transactionType').attr({
    'multiple': true,
    'size' : 10
});

$(function() {...})またはその他のオンロードに入れてください

編集

質問を読み直してください。複数選択を本当に探しているのではなく、複数選択を可能にするドロップダウンボックスを探しています。ええ、おそらくそのためにプラグインを使用するか、最初からそれを書くのが最善です。

0
Robert