web-dev-qa-db-ja.com

select2.jsの使用方法

テキストを自動入力して複数のタブを取得できるフォームフィールドを追加したい（fbと同様）。 select2.jsはそれを行うのに役立ちますが、複数の属性をtrueに設定すると使用に問題があります。複数を追加した場合：true、ページは通常の選択として表示します。

Select2ページのドキュメントがわかりにくいと思います。

私はそれらすべてに新しいです、私を助けてください。

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>          
<script type="text/javascript" src="select2.js"></script>          

 <link href="select2.css" rel="stylesheet"/>
    <script src="select2.js"></script>
    <script>
        $(document).ready(function() { 
        $("#e1").select2([multiple: true]);
        });
    </script>

</head>
<body>
<input type="button" id="123">click
</br>
<input type="hidden" id="1234">
<select id="e1">
        <option value="AL">Alabama</option>
        <option value="Am">Amalapuram</option>
        <option value="An">Anakapalli</option>
        <option value="Ak">Akkayapalem</option>

        <option value="WY">Wyoming</option>
    </select>

</body>
</html>
jqueryhtmljquery-chosenjquery-select2
12
petarap

マークアップにのみ、属性「multiple」と幅も追加します。

<select multiple id="e1" style="width:300px">

そして、このようにjs：

$(document).ready(function() { 
 $("#e1").select2();
});

ここフィドルを参照してください： http://jsfiddle.net/marcusasplund/jEADR/2/

サイドノート。あなたの質問に投稿されたコードでselect2.jsを2回ロードしています。

24
MarcusAsplund

Select2.jsに固有のクラスをオーバーライドできます。

.select2-container-multi .select2-choices {
    width: 150px;
}

うまくいくはずです。

1
Kanan Farzali

selectで複数の属性を使用できます

 <html>
  <head>
    <link href="select2.min.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="jquery.js"></script>      
    <script type="text/javascript" src="select2.min.js"></script>     
 </head>
 <body>
    <select multiple id="getCountry">
      <option value="India">India</option>
      <option value="Afghanistan">Afghanistan</option>
      <option value="japan">japan</option>
    </select>
    <input type="button" id="submit" value="Submit">click
    <script>
      $(document).ready(function() {   
        $("#getCountry").select2();   
      });      
    </script>   
  </body>
</html>
1
Ravi Patel