如何使用select2.js

时间:2013-01-28 09:02:23

标签: jquery html jquery-chosen jquery-select2

我想添加一个表单字段,可以自动填充文本和可以采用多个选项卡(类似于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>

3 个答案:

答案 0 :(得分:24)

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

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

和js如下:

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

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

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

答案 1 :(得分:1)

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

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

它应该有用。

答案 2 :(得分:1)

您可以在select

中使用use multiple属性
func connect() -> Bool {
    if !(xmppStream?.isConnected())!
    {
        let jabberID = "amit@gmail.com"
        let myPassword = "123456"
        if !(xmppStream?.isDisconnected())! {
            return true             }
        if jabberID == nil && myPassword == nil {
            return false             }
        xmppStream?.myJID = XMPPJID.init(string: jabberID)
        do {                 try xmppStream?.connect(withTimeout: XMPPStreamTimeoutNone)
            print("Connection success")                 print(xmppStream?.myJID.user ?? "kiler")
            return true             } catch {                 print("Something went wrong!")
                return false             }
    } else {
        return true
    }
}