通过javascript设置多个Select2元素的数据
可以通过以下步骤实现：
- 首先，确保你已经引入了Select2库和相关的依赖文件。你可以在Select2的官方网站上下载最新版本的库文件，并将其引入到你的项目中。
- 在HTML文件中，为每个需要设置数据的Select2元素添加一个唯一的ID或类名，以便在javascript中进行选择。
- 在javascript中，使用document.getElementById()或document.getElementsByClassName()等方法选择所有需要设置数据的Select2元素。你也可以使用jQuery选择器来选择元素。
- 对于每个选择的元素，使用Select2的相关方法来设置数据。你可以使用data()方法将数据绑定到元素上，或者使用ajax()方法从服务器获取数据。
- 如果你使用data()方法，你可以通过传递一个包含选项值和文本的数组来设置数据。例如：
var data = [
{ id: 1, text: 'Option 1' },
{ id: 2, text: 'Option 2' },
{ id: 3, text: 'Option 3' }
];
$('#select1').select2().empty().select2({ data: data });
$('#select2').select2().empty().select2({ data: data });- 如果你使用ajax()方法，你需要提供一个URL来获取数据。例如：
$('#select1').select2().empty().select2({
ajax: {
url: 'https://example.com/data',
dataType: 'json',
processResults: function (data) {
return {
results: data
};
}
}
});
$('#select2').select2().empty().select2({
ajax: {
url: 'https://example.com/data',
dataType: 'json',
processResults: function (data) {
return {
results: data
};
}
}
});- 最后，你可以根据需要自定义Select2的外观和行为。你可以使用各种选项和方法来实现自定义，例如设置占位符、启用搜索、设置最大选择数等。
这样，你就可以通过javascript设置多个Select2元素的数据了。记得根据实际情况修改代码中的元素选择器和数据源。如果你想了解更多关于Select2的信息，可以访问腾讯云的Select2产品介绍页面：Select2产品介绍。
相关·内容
我在一个页面上有多个select2框，我希望访问为每个页面选择的值。
我尝试将每个选择标记添加到一个类中，例如：“my-select2-box”，如下所示：
<select class="my-select2-boxes">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</select>
<select class="my-select2-boxes&#
浏览 3提问于2014-05-29得票数 0
回答已采纳
4回答
我使用select2和ajax search.How来设置一些选项无法选择。例如，如下图所示
我在输入中写了一个“w”，但是下拉列表中的第一行不是来自ajax搜索的数据。如何设置它不能被选择或不显示它？
html代码
<select id="normalSymptom" name="normalSymptom" class="form-control select2-multiple" multiple > </select>
javascript代码
$('#normalSymptom').sele
浏览 3提问于2016-11-02得票数 0
回答已采纳
我有一个ASP.net MVC项目。我所有的DropDownListFor显示为2个框，而不是1个。这是当前视图的样子：
视图应该是这样的：
以下是视图中的代码：
<div class="col-xs-12 col-sm-6 col-md-4 ">
<div class="form-group select-280">
@Html.LabelFor(model => model.HoleID)
<br />
浏览 1提问于2017-06-20得票数 0
回答已采纳
我正在尝试在我的jQuery下拉列表中添加select2验证。然而，它一直导致javascript异常的"nodeName未定义“，我不知道哪里出了问题。
$(".field-validation-required").each(function() {
// output SELECT, if current html class is a select2 dropdown.
console.log(this.nodeName);
$(this).rules('add', {
required: t
浏览 2提问于2017-08-22得票数 0
回答已采纳
2回答
使用css设置select2的宽度被select2的javascript调用覆盖。
// javascript
$(function() {
renderSelect("select");
});
# HAML example (Rails)
= select_tag "countries", options_for_select(@countries), class: 'some-ignored-css-class'
相关：
浏览 1提问于2016-02-12得票数 1
下面将多个锚元素与类'team‘绑定为x可编辑的select2输入。每个a.team都有不同的数据源(不同的是传递给a.team服务的ID，以便返回适用的团队列表)，但不幸的是，一旦绑定了第一个a.team，该数据源URL将用于页面上的所有后续a.team输入(因此，错误的团队列表绑定到每个后续的可编辑的select2输入)。
是否可以“重置”select2的数据属性，使其尊重每个a.team元素的每个数据源？或者其他的解决方案？
$('a.team').editable({
ajaxOptions: {
dataType: 'json&
浏览 2提问于2013-12-20得票数 4
回答已采纳
1回答
我正在使用django，bootstrap，select2，jquery来解决我的问题。
这是原始模板：
{% extends 'base.html' %}
{% block scripts %}
{% load static %}
<script language="javascript" type="text/javascript" src="{% static "myscript.js" %}"></script>
<link href="{% stat
浏览 1提问于2015-07-06得票数 0
在客户端(没有服务器端)，我们有带有javascript的html文件，是在浏览器中打开的。在HTML中，我们包括引导和select2插件来创建UI界面，我们还包括一个包含超过10000行数据的文件。这是basic.html文件的一部分：
....
<select class="js-example" name="selectmyData[]" id="selectmyData" multiple="multiple"></select>
<script src="data/mydata.j
浏览 7提问于2022-03-04得票数 2
回答已采纳
在页面加载时，如何使标签在其选择框中被预选？到目前为止，这是我的代码：
HTML：
<select class="selectBox operatingSystems" multiple="multiple">
<option>Windows</option>
<option>OSX</option>
<option>Linux</option>
</select>
联署材料：
$(".operatingSystems").se
浏览 1提问于2015-03-13得票数 0
回答已采纳
我试图使用下面的代码移动in，但是当我选择多个选项时，它不能正常工作
如何上下移动多个元素？
<script type="text/javascript">
\$().ready(function() {
//for moving elements up and down
\$('.up-button').click(function(){
before = \$('#select2 option:selected').prev();
\$('#select2 option:selected').
浏览 8提问于2013-10-11得票数 0
回答已采纳
我使用RequireJS导入javascript库。我想改变select2的默认语言作为文档指南，但是没有运气。
define(['jquery', 'select2'], function($) {
$(".select2").select2({
language: 'es'
});
});
select2 ()中的'select2‘指向select2 4.0.0包中的select2 2/dist/js/select2.Ful.js。
我必须手动加载locale文件selec
浏览 3提问于2017-01-05得票数 4
回答已采纳
我正在使用jQuery Select2 2.1，并尝试将其应用于具有相同id类的多个选择标记。我的代码如下所示：
<select id="e1" style="width: 300px">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
<option value="NY">New York</option>
&l
浏览 2提问于2013-05-26得票数 0
2回答
我包括来自cdn的select2，并将它应用于我选择的多个输入：
我的javascript：
$('select').select2();
我的html：
<select id = "cars" name="cars[]" multiple = "multiple" required = "required">
我的css：
#cars{
background-color:red !important;
}
由于某种原因，每当我将select2应用于我所拥有的任何选择时，我
浏览 7提问于2016-07-21得票数 2
回答已采纳
1回答
我有一个这样的表单搜索：
当我为select#search_topic使用时，这变成了：
这是我的select2代码：
<% content_for :head do %>
<script type="text/javascript">
$(document).ready(function() {
$('#search_topic').select2();
});
</script>
<% end %>
我的表单：
<%= form_tag({ controller: '
浏览 0提问于2012-11-13得票数 0
4回答
我在我的一个字段中使用Select2。数据可以完美地插入到数据库中。但是当我想要编辑表单时，我需要从数据库中获取数据。我可以获取数据，但我不知道在编辑表单时如何在Select2中显示值。这是我在数据库中插入数据时的代码。表名为"requests“，存储数组的列为"crimes_section”。 <div class="form-group">
<label>Crime Section / جرم</label>
<select class="crimeSections form-contro
浏览 23提问于2019-12-24得票数 0
回答已采纳
1回答
大家好，这是我的动态表单，我在此表单中使用select2搜索选项，但它不起作用
这个头
<script src="jquery-3.3.1.min.js" type="text/javascript"></script>
<!-- Select2 JS -->
<script src="select2/dist/js/select2.min.js" type="text/javascript"></script>
这是我的动态html表
浏览 1提问于2021-02-03得票数 0
13回答
Select2成功加载列表中的所有项，这是在页面加载时尝试选择特定值时发现的问题。示例：
*将select2放在特定的html元素中，即使加载了所有项，也不会选择任何值。
$('#my_id').select2();
*当页面加载时，我试图显示选定的特定项，但不像预期的那样工作，因为即使选中，select2也不会显示它。
$('#my_id').val('3'); //select the right option, but doesn't render it on page loads.
如何选择页面加载时弹出的选项？
提前谢谢。
已更
浏览 10提问于2013-02-19得票数 41
回答已采纳
我有两个表，分别是用于存储三列数据的includes和TIncludes；一个ID、macro_num、宏includes(table1)包含了所有可能列出的项，这些项由macro_num在表单(select1)的列表框中显示。用户可以将想要的项目添加到第二个框select2。列表框填充数据并使用javascript将数据移动到其他添加/删除按钮。我似乎无法从select2获取数据以插入到我的数据库中。不确定我设置错误或忽略了什么。有没有这种事情的工作示例？我只看到在哪里插入一个项目，这是很好的，但我有一些报告，需要40个项目。提前感谢您阅读本文。我希望能有一个快速的解决方案，因为我以前没有处
浏览 1提问于2012-06-26得票数 0
我正在使用ivaynberg的，在提交时如何返回数据有问题。
有没有办法让表单中的提交数据按照它们在select2元素中选择的顺序来获得结果，而不使用可排序的拖放解决方案？假设有三个选项：
<option name=red value=red>red</option>
<option name=blue value=blue>blue</option>
<option name=green value=green>green</option>
在多个select2元素中，选择是先绿色后红色(在呈现的元素中，绿色位于红色之前
浏览 2提问于2014-09-13得票数 0
我见过许多类似于此的不同问题，但它们通常都针对特定的选择器。如果有复制的地方，请告诉我，我已经错过了。
以这个场景为例：
您希望为wordpress、drupal或基本上任何使用第三方功能的站点构建jquery插件。由于您无法提前了解每个特定事件和选择器，因此需要针对如何向动态创建的元素添加jquery/javascript功能。另外，您不知道如何创建元素(使用ajax/php/etc进行回调)。
示例：
最近，我尝试向我的整个站点添加select2或选择。不幸的是，由于无法提前确定何时添加select元素(来自其他插件/模块)，所以无法确保select jquery将用于新创建的select
浏览 1提问于2014-06-07得票数 5
我正在尝试向SELECT2选择框中添加一个特性。我在select2盒子里有一个美国州。一切运行良好，但用户需要有时间输入他们已经拥有的一个列表，如AZ，MS，KY，WS，TN，HI，FL，NY。我可以将它们复制到select2框中，但它们不会被检测为诸如AZ、MS、KY、.等值。我认为在手动编辑时，我需要一个函数来处理这个框，但我不知道如何做到这一点。有什么想法吗？
浏览 5提问于2022-07-28得票数 0
我有一个在页面加载时初始化location.select2数据的select2下拉列表。我想使用ajax.But定期更新数据当我更新select2的数据时，select2下拉列表变为只读
jQuery("#e10_2").select2({
allowClear: true,
minimumInputLength: 1,
data:{ results: locationls, text: function(item) { return item.text; }},
formatSelection: form
浏览 3提问于2013-11-11得票数 2
回答已采纳
1回答
我正试图加快我的select2结果，因为我有超过六千个客户在数据库中。我的输入框中装满了mysql数据库中的数据，我不知道在这个阶段我还能尝试什么，老实说。这是我的select2 javascript (Js不是我喜欢的)
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<script type="text/javascript">
$(function(){
// turn th
浏览 4提问于2015-07-06得票数 1
1回答
select2搜索无效
、、、、
我已经工作了一段时间的select2插件，直到现在，它是完美的。
我有一个页面，有3个选择正在加载数据和工作良好，多个选择是在弹出窗口内。他们看起来不错，但你不能在搜索栏上写字。在主页上，搜索工作进行得很好，所以我不知道问题出在哪里。
我正在使用弹出窗口的blockUI插件。我尝试过z索引，破坏并启动了blockUI函数回调的插件，但是没有什么工作，我也不知道为什么。
守则：
<!doctype html>
<html>
<head>
<title>ff</title>
<link type="text/css"
浏览 4提问于2013-02-19得票数 3
我在我的站点中为我的用户创建了一个标记输入，为此，我用下拉帮助编写了一个标记函数。所以我的问题是，我想从JavaScript文件中的数据库中获取数据。
Js
var FormSamples = function () {
return {
//main function to initiate the module
init: function () {
// use select2 dropdown instead of chosen as select2 works fine with bootstrap on resp
浏览 0提问于2015-08-13得票数 1
我有一个这样定义的选择：
<select class="myselect">
<option value="AL" data-foo="bar">Alabama</option>
...
<option value="WY" data-foo="biz">Wyoming</option>
</select>
在早期版本的Select2中，我可以轻松地检索数据值，如下所示：
alert($("#" + contr
浏览 4提问于2015-05-15得票数 3
回答已采纳
1回答
我有一个select2选择，我正在尝试设置使用javascript的值。我已经在这个地址创建了一个小提琴。
我试着让他跟上
// method 1
$('#groupList').select2('data',{id:"group2", text:"group2"},true);
// method 2: as seen on the select2 website
var groupList = $('#groupList').select2();
$(groupList).val("group2
浏览 1提问于2016-01-13得票数 0
我需要捕获页面其他地方的对象的事件(如单击)，而不是select2对象的子对象，而select2对象具有焦点并显示结果。当select2结果对象聚焦时，我不能单击页面其他地方的按钮/锚，让它执行其操作。它只是关闭了select2对象。
有办法这样做吗？下面是一个演示，展示了这种行为：
<!-- Javascript snippet -->
$(document).ready(function() {
$("#e1").select2();
$("#e2").click(function(){
浏览 3提问于2015-01-22得票数 3
回答已采纳
1回答
好的，我正在尝试使用select2的标签和AJAX功能来选择我的类别。
目前，用户可以搜索类别以添加到他们的帖子中。我注意到的一件很好的事情是，select2不会让你选择同一个选择两次(它是灰色的，当你点击它时没有任何反应)。
这是我的挑战。假设一个用户正在编辑一篇文章，并且已经选择了类别。这些类别显示在select2搜索的下方。例如，假设用户选择了类别"Life“。这将显示在已选中的下方。
然而，当用户搜索"Life“时，问题就出现了。他们将能够选择它并再次添加它。我可以只解析前面的选择并取消选择，但为了保持一致性，我真的很想使用select2的内置功能。
那么，如何将传入的
浏览 5提问于2015-10-05得票数 0
在这里，我包含了脚本：
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type='text/javascript' src='//netdna.bootst
浏览 2提问于2014-03-17得票数 2
回答已采纳
2回答
我正在尝试使用json从一个php页面获取遥控器，即JSON数据：
[{"id":"0","name":"ABC"},{"id":"1","name":"DEF I"},{"id":"2","name":"GHI"}]
脚本是这样的：
$(document).ready(function() {
$('#test').select2({
minimumInputLe
浏览 3提问于2014-04-12得票数 0
我使用Select2作为我的下拉列表。即使我单击inside dropdown，也会出现以下错误：
只有当我在表单内部使用select2时，才会出现这个错误，而表单外部的表单运行得很好。
下面是我的代码：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.
浏览 0提问于2017-02-27得票数 0
我正在尝试将Select2集成到一个木偶ItemView中。
问题:我想用已经选定的值初始化Select2，但在下拉列表中仍然可以使用选定的元素。如果我清除该框，然后从下拉列表中手动重新选择项目，则这些项目将从下拉列表中正确删除。
Javascript：
View.Profile = Marionette.ItemView.extend({
template: profileTpl,
onShow: function(){
var $select = this.$("#categories"); // grabs the element for Se
浏览 3提问于2014-10-08得票数 0
我需要重置一对select2选择元素。目前，我正在做以下工作
$("#ItemId").select2("val", "");
$("#PermanentDistrictId").select2("val", "");
$("#PermanentThanaId").select2("val", "");
$("#PresentDistrictId&#
浏览 3提问于2013-11-07得票数 2
回答已采纳
6回答
我使用的是select2插件(ivaynberg.github.io/select2)。我正在尝试显示下拉菜单(Select)。它以选项的形式获取data.php中的所有项目。然而，select2是一个自动补全插件，应该搜索客户输入的搜索词，并只显示匹配的结果。目前，它正在显示所有项目，但没有获得搜索结果。对我的语言表示抱歉
data.php呼应了这一点：
[{
"id": "1",
"text": "item1",
"exercise": "blah text"
},
浏览 4提问于2013-04-24得票数 20
我有一个使用Select2 (4.0.3)和角(1.4.9)的项目。其中一个表单使用角度控制器和双向数据绑定，加载一个接触模型，其中包含多个站点，并从服务器加载可用站点列表。这些数据分别被添加到contact对象和sites数组中，后者是控制器的属性。我已经实现了一个Select2多重选择，它允许用户更新属于联系人的站点列表。
<select
name="sites"
class="form-control m-b js-example-basic-multiple site-select"
multiple="multi
浏览 2提问于2016-10-04得票数 0
回答已采纳
我正在开发一个软件，其中所有的选择元素都使用select2库。在页脚中有这样的代码来实现这一点：
$('select').select2();
现在我正在开发一个新的屏幕，一些选择将使用select2，而另一些则不使用，所以我为那些不应该使用select2的选择创建了".noSelect2“类。当我放入这段代码时，它只销毁第一个select：
$('.noSelect2').select2('destroy')
我能做些什么来销毁所有的元素？
浏览 0提问于2015-10-21得票数 3
回答已采纳
2回答
我在我的角度项目中使用select2，实际上我有一个问题，就是我不知道如何设置select-选项的默认值。这是我的代码：
HTML :
<select-tag-manager parent-id="2" value="restaurant.type" ></select-tag-manager>
角:
app.directive('selectTagManager', function() {
return {
restrict: "E",
replace: true
浏览 5提问于2016-09-10得票数 0
我是一个使用Rails 4.2.6开发Rails应用程序的人。我使用Turbolinks与jquery.turbolinks (对不起，我不能张贴到这些元素的链接，因为我是一个新手在网站上)。我的问题很简单，但我就是解决不了。如下所示:我有一个通过AJAX获取的表单
<div class="card-footer">
<a class="btn btn-sm btn-primary-outline" data-remote="true" href="/profiles/Mke5kA/positions/new
浏览 18提问于2016-04-08得票数 23
正如标题所述，我试图在同一个页面上多次使用相同的javascript函数。基本上，我有两个单独的下拉列表，通过ajax调用用户，这样即使是新用户也会出现。(该站点的基础是不必总是重新加载。)不管怎样，我现在的设置方式是这样的.
Javascript：
function getAllUsers() {
(function getAllUsers() {
$.ajax({
url: 'staff/getAllUsers.php',
success: function(data)
浏览 0提问于2019-03-16得票数 3
回答已采纳
4回答
我正在使用jQuery插件。如何使用jQuery选择所选选项的数据属性。
这是代码
<select class="select2">
<option data-id="1" value="2"> CASE 1 </option>
<option data-id="2" value="2"> CASE 1 </option>
<option data-id="3" value="2"> CASE 1 &
浏览 5提问于2014-12-04得票数 0
回答已采纳
我有如下代码，用于添加动态选择框并为每个选择框加载select2搜索：
<script type="text/javascript">
var attribute_row = <?= $attribute_row; ?>;
function addAttribute() {
html = '<tr id="attribute-row' + attribute_row + '">';
html += ' <td class="
浏览 16提问于2020-05-19得票数 0
回答已采纳
5回答
要将普通的Html转换为，文档说只需调用普通Html上的select2()，如下所示
$(document).ready(function() {
$('.js-example-basic-single').select2();
});
当我尝试这一点时，我还导入了我通过npm安装的select2模块。
import select2 from 'select2';
Javascript特性/概念/技术的名称是什么，它允许将新函数(在本例中为.select2())添加到现有对象中？
更新--我忘了提到我使用的是BJRINT学到的东西。因此，这似乎是jqu
浏览 0提问于2019-05-24得票数 2
回答已采纳
我是个初学者，我一直在玩select2.js的多重选择选项。在一个历史学校的数据库中，我们有超过300000个学生id。我可以让select2选项工作，但是它非常慢，而且要花很长时间才能加载。我见过其他页面使用select 2加载大量数据，运行良好。
我使用下面的javascript来加载select2。
$(document).ready(function () {
$('.js-example-basic-multiple').select2();
});
在Django中，我用以下内容加载模板中的数据：
<script src= "{% st
浏览 1提问于2018-03-16得票数 2
回答已采纳
7回答
我正在工作的Select2选择框。
问题
占位符不在select2中显示。它总是显示在select2中选择的第一个选项。它自动选择第一个选项，我想显示占位符而不是它。
我的守则：
脚本：
<script type="text/javascript">
$(document).ready(function () {
var data = $('#test_skill').select2({
placeholder: "Please select an skill",
浏览 6提问于2017-09-11得票数 21
回答已采纳
我让Select2工作了。太棒了，太棒了。
我们有一个数据库，其中包含一些我们继承到数据库的公共元素。我想将Select2添加到这个db中，这样数据库可以很容易地使用它，但是不知道如何做到这一点，因为您必须将一些项放在package中。
有什么办法吗？
浏览 4提问于2016-01-08得票数 0
回答已采纳
我正在使用引导x可编辑的
这是我的html代码：
<a href="#" data-name="category" class="addon" data-value="{{$cat->id}}"
data-pk="{{$cat->id}}" data-type="select2" data-title="Favor llenar los campos"></a>
javascript代码：
$('.addon').editab
浏览 6提问于2016-12-12得票数 10
回答已采纳
2回答
目前，我有这个列表，并添加了一些jscript，这个列表从一个SOLR获取类别。我的问题是，如何从我的选择中获得更多的项目？
<script src="jquery-1.8.0.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.clo
浏览 4提问于2016-11-21得票数 1
回答已采纳
我很难用LocalStorage.The在下拉列表中显示列表，问题是，当我再次回到我的模式时，比如下拉列表中的图像，列表没有显示，我只想在下拉列表中显示保存在本地存储中的列表。有专家知道这件事吗？提前谢谢。
，这就是我试过的
<button type="submit" class="btn btn-outline-primary" onclick="storagelocal()">Search</button>
选择选项
<select class="select2 form-control&
浏览 0提问于2020-12-15得票数 0
我有一个从Ajax数组填充的select2 v4.0.0。如果我设置了select2的val，我可以通过javascript调试看到它选择了正确的项(在我的例子中是#3)，但是这没有显示在选择框中，它仍然显示占位符。
而我应该看到的是这样的东西：
在我的表单字段中：
<input name="creditor_id" type="hidden" value="3">
<div class="form-group minimal form-gap-after">
<span clas
浏览 92提问于2015-05-19得票数 104
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
