如何使用 select2.js
Posted
技术标签:
【中文标题】如何使用 select2.js【英文标题】：How to Use select2.js 【发布时间】：2013-01-11 14:05:56 【问题描述】：我想添加一个表单域，它可以自动填充文本并可以使用多个选项卡（类似于 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>
【问题讨论】：
这里是示例教程youtu.be/gTNQOxvuUv0 【参考方案1】：仅在标记中添加属性“multiple”和宽度。
<select multiple id="e1" style="width:300px">
和 js 一样：
$(document).ready(function()
$("#e1").select2();
);
在此处查看小提琴：http://jsfiddle.net/marcusasplund/jEADR/2/
附注；您在问题中发布的代码中加载了 2 次 select2.js。
【讨论】：
这在 Cakephp 上对我有用。花了很长时间试图弄清楚他们在 select2 git 上发挥了什么魔力......谢谢。 @mattblang 你是对的，也许“仅在标记中”有点令人困惑。在 css 中指定宽度可能会更好。可能是，因为您必须将 select2 构造的容器的宽度设置为：.select2-container-multi width: 300px 然后，如果在目标选择元素上根本没有指定宽度，则 select2 元素将仅以 2*5px 填充开始和 0px 宽度 = 10px。对于一个好的用户体验来说，它可能有点小。在这里更新小提琴：link
在您想要的选项上设置选定的属性作为初始值：<option value="Am" selected>Amalapuram</option> 请参见此处的小提琴：http://jsfiddle.net/jEADR/326/【参考方案2】：
您可以覆盖特定于 select2.js 的类：
.select2-container-multi .select2-choices
width: 150px;
它应该可以工作。
【讨论】：
【参考方案3】：您可以在 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>
【讨论】：
以上是关于如何使用 select2.js的主要内容，如果未能解决你的问题，请参考以下文章
Laravel：如何使用 select2.js 更新多个 Select 选项
如何使用 Select2.js 对从 Ajax 调用返回的数据进行多选结果？
如何在 select2.js v4.0 中显示 ajax 数据？