jQuery 如何使用 select2.js

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/14558578/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 13:42:40  来源:igfitidea点击:

How to Use select2.js

jqueryhtmljquery-chosenjquery-select2

提问by petarap

I want to add a form field which can auto fill text & can take multiple tabs(similar to fb). I found select2.js helps me do it, But i am having problems in using it when i set multiple attribute to true. if i add multiple: true, the page dispalys it as a normal select.

我想添加一个可以自动填充文本的表单域,并且可以使用多个选项卡(类似于 fb)。我发现 select2.js 可以帮助我做到这一点,但是当我将多个属性设置为 true 时,我在使用它时遇到了问题。如果我添加多个:true,页面将其显示为正常选择。

I find documentation on select2 page confusing.

我发现 select2 页面上的文档令人困惑。

I am a new to all of them, Please help me out.

我是他们所有人的新手,请帮助我。

<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>

回答by MarcusAsplund

Add the attribute "multiple", and a width as well, only in the markup.

仅在标记中添加属性“multiple”和宽度。

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

and js as this:

和 js 如下:

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

See fiddle here: http://jsfiddle.net/marcusasplund/jEADR/2/

请参阅此处的小提琴:http: //jsfiddle.net/marcusasplund/jEADR/2/

A side note; you are loading select2.js 2 times in the code posted in your question.

旁注;您在问题中发布的代码中加载 select2.js 2 次。

回答by Kanan Farzali

You can override the class specific for select2.js:

您可以覆盖特定于 select2.js 的类:

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

It should work.

它应该工作。

回答by Ravi Patel

You can use use multiple attribute with select

您可以在 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>