具有自定义数据值的Select2 ajax预选
Select2是一个基于jQuery的自定义选择框插件，它提供了更强大和灵活的选择框功能。通过使用Ajax预选，可以根据用户输入的值动态加载并预选数据。
具体来说，Select2 Ajax预选是指在用户输入值时，通过Ajax请求从服务器获取匹配的数据，并将其作为预选项展示给用户。这种方式可以提供更好的用户体验，减少用户的输入工作量，并且可以根据实际需求动态加载数据。
Select2 Ajax预选的优势包括：
- 动态加载数据：通过Ajax请求，可以根据用户输入的值从服务器获取匹配的数据，实现动态加载，减少数据传输量和加载时间。
- 减少用户输入：通过预选数据，用户可以直接从下拉列表中选择匹配的选项，减少手动输入的工作量，提高效率。
- 提供更好的用户体验：Select2插件提供了丰富的样式和交互效果，可以提供更好的用户界面和交互体验。
Select2 Ajax预选的应用场景包括：
- 大量数据选择：当需要选择的数据量较大时，可以通过Ajax预选来动态加载数据，提高选择的效率和用户体验。
- 搜索功能：当需要实现搜索功能时，可以通过Ajax预选来实现根据用户输入的关键字动态加载匹配的数据。
- 表单自动填充：当需要根据用户输入的值来填充表单中的其他字段时，可以通过Ajax预选来获取匹配的数据，并自动填充相关字段。
腾讯云提供了云计算相关的产品和服务，其中与Select2 Ajax预选相关的产品是腾讯云的云开发（CloudBase）服务。云开发是一款面向开发者的一体化云原生开发平台，提供了丰富的后端云服务和前端开发框架，可以满足开发者在云计算领域的各种需求。
腾讯云云开发产品介绍链接地址：https://cloud.tencent.com/product/tcb
请注意，以上答案仅供参考，具体的产品选择和推荐应根据实际需求和情况进行评估和决策。
相关·内容
我试图使用“val”预先填充选定的选项，但在选项中预选的选项只有一个。
<select name="question_tags[]" id="question_tags" class="select2_tags" multiple="multiple">
$(document).ready(function() {
$('.select2_tags').select2({
placeholder:"Select",
浏览 0提问于2018-05-12得票数 2
回答已采纳
6回答
我有一个像这样的多重选择：
<select multiple="multiple" class="myList">
<option value="1" selected="selected">Apple</option>
<option value="2" selected="selected">Mango</option>
<option value="3" selec
浏览 12提问于2014-11-04得票数 17
我通过以下方法初始化了一个select2：
$('#bookingResource').select2({
placeholder: "Select Resource",
minimumInputLength: 0,
multiple: true,
allowClear: true,
data: function() {
return {results: sections };
}
});
节是一个具有id和text键的对象，这些键由select2使用。
我需要仅使用来自另一个对象的ID预选一个值。
浏览 5提问于2014-09-07得票数 0
回答已采纳
在页面加载时，如何使标签在其选择框中被预选？到目前为止，这是我的代码：
HTML：
<select class="selectBox operatingSystems" multiple="multiple">
<option>Windows</option>
<option>OSX</option>
<option>Linux</option>
</select>
联署材料：
$(".operatingSystems").se
浏览 1提问于2015-03-13得票数 0
回答已采纳
9回答
使用Select2动态填充远程调用，以及如何设置预选值。这是代码
<input type="hidden" id="e6">
$("#e6").select2({
placeholder: "Search for a movie",
minimumInputLength: 1,
ajax: {
url: url,
dataType: 'jsonp',
data: function (term, page) {
浏览 2提问于2014-03-18得票数 10
回答已采纳
3回答
我希望选择(也称为jQuery预选)并根据数据变量设置值。列表中有3个具有相同值但数据不同的项-d。
假设我有变量selectvar="d"，那么它应该更改为列表中的2项。
<select id="select2">
<option data-id="mo" value="1" style="display: none;">1</option>
<option data-id="d" value="1" style="
浏览 2提问于2017-04-08得票数 5
回答已采纳
1回答
这与使用Select2插件、Ajax和API分配多个用户有关。在这种情况下，我有一个包含有不同指向URL的2 Ajax的函数。目前，我已经预先选择了存储在DB中的用户.选择是在一个模式中使用Select2。那么，当Modal打开时，第一条Ajax将加载/all_user以显示DB中的所有用户。在此之后，第二条Ajax将加载URL，以获取和加载相同模式中其他字段的信息。两个URL都是并行运行的。
成功显示所有用户的URL /all_user。URL /activity也成功地显示预选的用户.但是，当我关闭Modal并在不刷新页面的情况下重新打开相同的Modal时，它肯定会加载上面提到的包含2 A
浏览 2提问于2020-03-30得票数 2
2回答
我试图让select2与多个预选选项一起工作。我使用它让用户选择几个选项，然后保存它们，然后能够返回并编辑它们。但是，我无法让select2 initSelection正确地工作，以填充用户已经选择的现有选项。下面是我尝试与警报一起使用的代码，用于显示什么时候触发了警报(“完成”)；从未触发过警报，并且警报($(元素).val(0))触发了两次。一次使用输入中的值，然后再使用空白。
<input type="text" id="Commissioners" name="Commissioners" value="test"
浏览 3提问于2015-05-06得票数 3
回答已采纳
1回答
我正在Laravel上创建用户配置文件页面，并使用select2组件来筛选大量的项目列表。
我有一个基于ajax的select2。这是好的，当你在/create页面，但我需要有选择的价值，当我在页面/edit/1。
$('.search-filter-ajax').select2({
width: '100%',
minimumInputLength: 3,
placeholder: "Search...",
浏览 0提问于2018-08-10得票数 1
回答已采纳
我正在使用select2渲染。我在用更新的版本。我尝试使用initSelection设置初始值，它工作得很好。但是，当我试图添加另一个值时，它会将预选值更改为ID，该ID是通过initSelection设置的。
<?php
$initScript = <<< SCRIPT
function (element, callback) {
var id = \$(element).val();
if (id !== "") {
var url = "{$url}";
\$.ajax(url.replace('i
浏览 2提问于2016-06-06得票数 0
回答已采纳
在中，我测试了jQuery从select元素中选择一个选项，该选项工作了一次.但是如果我想清除预选并再次设置它，多次(第二次使用两个按钮)，它不再改变.我在firefox和chrome上试过。
为什么要这样？还没有找到解决办法：
HTML：
<select>
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option&
浏览 8提问于2016-11-15得票数 4
回答已采纳
1回答
我是预置值的如下所示。
function formatState(state) {
console.log(state.text2) // I found undefined here.
console.log('hello') // This is called when values are populating.
if (!state.id) { return state.text; }
var output = $('<span class="tooltip" title="' + st
浏览 7提问于2022-01-25得票数 0
我的DB将信息存储在类似于这个Administrator,Anna的字符串中，所以如果我想在Select2中显示这个预选，我知道它必须在数组中显示(如果我错了，对不起)。问题是，我需要把它分割成数组并显示。
不幸的是，这两个名称都没有显示。
已经在Array中拆分的两个名称。
当名字是像这样的单曲时，它就出现了。
那怎么解决呢？
JS
$.ajax({
...
success: function(response){
if (response.status == "Success"){
浏览 1提问于2020-03-29得票数 0
回答已采纳
1回答
我使用一个foreach循环通过库生成下拉列表，但是我需要能够预选其中的一个，因为我有一个编辑视图，我需要它来加载数据库中的选项。
我在编辑视图中的选择：
<select name="type" id="type" class="form-control">
@foreach ($MailMessageTypes as $value =>$label)
<option value="{{$value}}">{{$label}}</option>
@endfo
浏览 4提问于2020-10-11得票数 3
回答已采纳
我有一个初始下拉列表，其中我要选择一个值：
<select id="indexID" name="indexID" class="form-control" onChange="updateSector();" style="width:300px;">
<option value='' selected>Select and Index</option>
<option value='3'>AIM</option>
浏览 1提问于2020-02-08得票数 1
回答已采纳
我在一个大项目中工作，它有很多表单，表单有很多元素。
性别大小写只有4个选项，然后我将其设置为：(我一次将我所有的值发送到我的视图)
$('#gender').select2();
Client case有993324个选项，我将其设置为：(通过ajax查询远程数据)
$('#client').select2({ ajax: { url: 'url/to/myclients', dataType: 'json' ... } });
我还有其他对象，它们有100,300，5,000,10000,50000。我
浏览 2提问于2019-06-27得票数 0
我使用select2 jQuery模块创建一个选择框。我在早期版本(3.4.5)中这样做，效果很好。但是在升级到4.1.0之后，预选一个选项就不起作用了。
我的代码如下所示，
HTML -部分：
<input type="text" id="accessories" />
联署材料：
jQuery(document).ready(function() {
var acceArray2 = [{id:0,text:"textA"},{id:1,text:"textB"},{id:2,text:"textC&
浏览 6提问于2022-01-11得票数 0
回答已采纳
1回答
我从文档中修改了VueJS，以包含AJAX数据源选项。是我的代码。
但是，我希望设置我的ajax url 属性的select2组件动态最好是这样，
<select2 :options="options" v-model="selected" url="dynamic-url-here">
<option disabled value="0">Select one</option>
</select2>
我该怎么做？
浏览 4提问于2017-09-26得票数 1
回答已采纳
1回答
我正在尝试将一些预选的值填充到中。我的代码如下。
(function($) {
$(document).ready(function() {
$(".volunteer").on("click", function (event) {
let element_id = event.target.id;
// Check if select is already loaded
if (!$(this).has("select").length) {
var cellEle = $
浏览 8提问于2022-01-04得票数 2
回答已采纳
我正在使用select2插件来选择多个国家。当我填充<select>的选项时，对于某些<option>，我使用selected属性来预选它。
代码(页面中使用PHP回显选项)：
<select name="allowed_countries[]" class="form-control select2" multiple="multiple" required>
<option value="ALL" >All Countries</option>
<op
浏览 0提问于2017-05-13得票数 0
4回答
我遇到了一个有趣的问题，我似乎无法用和来解决这个问题。
单击某个事件时，我试图使用数据库中的内容预选Select2下拉列表：
$('#calendar').fullCalendar({
eventClick: function(calEvent, jsEvent, view) {
$("#view_event").modal(); //launches bootstrap modal
$("#client_list_edit").select2();
$("
浏览 7提问于2013-04-24得票数 7
2回答
编辑:我为无结果处理找到了一个临时解决方案。您可以返回id为0的no结果查找标记。它仍然是可选择的，但是在将标记插入数据库时可以跳过它，如下所示：
if($tagId != 0){
// tag is not the no result tag, so continue
}
这是一个暂时的解决方案，而另一个问题仍然存在。
编辑2:无结果处理问题得到回答。我的代码中有一个错误，使preSelectedTags变成了PHP错误。哎哟.
我已经找了两天了，似乎找不到答案。
我使用添加标记功能。它显示的很好，当有标签设置的时候它就能工作了。然而，当没有预选的标签时，整件事情就会中断。下面是我的
浏览 1提问于2015-03-24得票数 1
我的问题是，我什么时候将我的Select2与多个Knockout视图模型绑定在一起。选择其中一个选项后，数据将第二次丢失
KnockOutCode
$(window).load(function () {
ko.bindingHandlers.select2 = {
init: function (element, valueAccessor, allBindingsAccessor) {
var obj = valueAccessor(),
allBindings = allBindingsAccessor(),
lo
浏览 1提问于2014-01-15得票数 7
回答已采纳
我正在尝试使用Select2中的标记。我想让用户能够加载一些已知的标签，有时添加新的，如果他愿意的话。
问题是，Select2给了我只在新选择字段中添加新标记的选项。如果你预装了一些数据到字段中并预选了它，你就失去了这个能力。
这里有一个问题的例子：
$("#tags").select2({
multiple: true,
tags: true,
placeholder: "enter",
tokenSeparators: [','],
data: ['11&
浏览 2提问于2016-10-19得票数 0
回答已采纳
我正在将<input type="hidden">转换为select2 dropdown，并通过query方法向其提供数据
$('#inputhidden').select2({
query: function( query ) {
query.callback( data ); // the data is in the format select2 expects and all works well..
);
});
问题是，我需要修改ajax UI，并将两个按钮放置在搜索栏的顶部，当单击这两个按钮时，将执行se
浏览 3提问于2013-05-10得票数 48
回答已采纳
1回答
我已经为布局页面中的所有选择元素激活了Select2插件(将其应用于整个应用程序) <script> $(document).ready(function() {
$('select').select2() 但是在ajax调用之后，应用于所有选择元素的select2都停用了，如何解决这个问题？我想让select2永远处于活动状态。谢谢!
浏览 14提问于2020-07-16得票数 0
1回答
我有个小问题。我的编辑表单中有一个Select2多选择字段。现在我的目标是我的脚本加载所有选项，并且正确的选项是预选的。
我已经试过整件事了，但到目前为止还没有达到预期的结果。
这是我的密码
用于多重选择的控制器片段。
// Convert multiselect in right form
$product = $product['tags'];
$new = serialize($user);
$product['tags'] = $new;
edit.blade.php (片段)
<div class="form-group">
浏览 0提问于2021-03-02得票数 2
回答已采纳
我有一个包含来自ajax的数据的datatable。我有一些输入字段，当点击一个按钮时，我希望datatable发出一个新的ajax请求并重新加载数据。
我有：
<script>
var domain = [];
var subdomain = [];
var job_role = [];
var month = [];
var meta_activity = [];
$.fn.dataTableExt.oApi.fnFilterAll = function (oSettings, sInput, iColumn, bRegex,
浏览 3提问于2016-04-28得票数 0
我使用Ajax的Select2插件(v3.5.2)动态加载列表中的元素。
在Select2的初始化(在ajax中设置了url属性)和ajax调用的时间之间，我遇到了一个问题，这个url可能需要更改。
所以我有这样的东西：
$box.select2({
containerCssClass: "form-control"
minimumInputLength: 0,
allowClear: true,
ajax: {
url: someUrl,
dataType: 'json',
quietM
浏览 1提问于2015-05-21得票数 16
回答已采纳
3回答
我想添加一些select2 (jquery插件)输入数据到数据库中…所以首先我有html，html很好：
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="vrsta">Vrsta aktivnosti</label>
<div class="col-md-4">
<input type="hidden" i
浏览 0提问于2014-03-19得票数 0
我有一个城市字段，在inlinedit中调用它将ajax数据加载到下拉列表中。但是，当我键入一个术语时，它不会使用自动选择来选择结果。例如，如果我输入" pabna "，那么它应该用"pabna“选择自动选择选项，现在它只显示带有结果的下划线，即在"pabna”上，它只在pabna word上显示下划线。我正在尝试用下面的数据函数来改进我的代码。
$('#city_id').editable({
type: 'select2',
name: 'otmp_tx_user_det
浏览 0提问于2013-11-12得票数 0
我有两个下拉列表，让我们说：“工作类型”和“负责人”。
当用户选择“作业类型”时，它将预选“负责人”。
示例：
工作类型：
金融
电脑
杂货
负责人：
爱丽丝
鲍勃
塞利翁
大卫
伊森
当我选择“金融”时，“大卫”将被预选。当我选择“计算机”时，"Celion“将被预选。..。
如何在SugarCRM中自定义？逻辑钩子？还是元数据？
谢谢。
浏览 1提问于2014-01-23得票数 1
2回答
我实现了一个标签系统，您可以从现有的标签中选择或者添加新的标签。在选择了新标记之后，它将使用AJAX调用保持不变。
为了实现这一点，我使用回调createTag和事件select2:select。因为我喜欢只在标记被选中时才创建它，所以如果事件select2:select被触发，我会对其执行AJAX调用。
问题是，我需要用将新标记持久化到数据库中获得的ID更新已经创建的select2选项。最干净的解决方案是什么？
我现在拥有的是：
$('select.tags').select2({
tags: true,
ajax: {
url:
浏览 5提问于2015-12-08得票数 8
回答已采纳
当用户在Laravel中从Select2中选择项目时，如何从Api中获取数据并显示给动态表中的相关控件？
我用的是拉拉维尔和select2。在我的表单中，我动态地添加select2和输入文本，并使用ajax请求从服务器获取select2数据，并使其正常工作。在这里，我使用select2的‘分类器’和输入文本的‘平衡’在动态表中。他们有一个“添加”按钮来在表中添加新行。当用户相应地从select2中选择项目时，我想调用Api来获取分类平衡，并将其显示在平衡输入文本上。
当select2初始化时，我正在使用下面的代码，它对新创建的行很好。
$('.select2_el').on(
浏览 13提问于2022-09-20得票数 1
回答已采纳
参考，加载远程数据时会显示文字"Searching“。但是，我不知道为什么在我的例子中会显示“未定义”。
这是css文件。
<div class="col-sm-9">
<select class="js-data-example-ajax form-control" style="width:100%;">
<option value="select2/select2" selected="selected">select2/select2</opti
浏览 0提问于2015-01-12得票数 6
1回答
我读过一些帖子，但我不能让它起作用！我正在尝试预选"Select2“中的"2015”，但是没有选择任何内容！
作为一个奖励，我想要帮助切换静态日期，到"thisYear“和"pastYear”。JS在一起应该是什么样的呢？
<!-- Select2 choose_year -->
<div>
<input type='hidden' class='col-md-2' id='choose_year' name='choose_year'>
</div&
浏览 1提问于2015-02-20得票数 4
回答已采纳
在我的视图中，我使用下面的select2 Yii小部件填充下拉列表。由于准备select列表所需的数据包含超过2K的记录，所以我使用带有select2参数的minimumInputLength和一个ajax查询来根据用户输入生成列表的部分结果。如果我创造了一个新的记录，我完全没有问题。它可以很好地填充所有内容，我可以将数据保存到数据库中。但是，在我的更新操作中，我不知道如何将保存的数据加载回这个下拉列表。我在某个地方读到了这篇文章，但我不知道如何使用它。
有人能帮我吗？
我的看法是：
$this->widget('ext.select2.ESelect2', array(
浏览 3提问于2014-04-09得票数 3
回答已采纳
我有一台HTML.dropdown multiple select2工作得很好。当我存钱时，
但是:更新页面上的我必须在下拉列表中显示预选的值
以下是代码：
<div class="col-md-6 mb-3" id="categorylist">
<p class="mb-1 font-weight-bold text-muted mt-3 mt-md-0">Category*</p>
@Html.DropDownList("pCategory[]", new SelectList
浏览 0提问于2019-08-20得票数 1
回答已采纳
2回答
我们正在尝试将xml与的ivaynberg提供的select2结合使用。
我们使用以下代码来获取xml数据
$('#selectbox').select2({
minimumInputLength: 1,
ajax: {
url: 'test.xml',
dataType: 'xml',
data: function (term, page) {
return {
q: term
};
},
results: function (data, page) {
return { resu
浏览 0提问于2013-11-08得票数 2
我有一个Kendo多重选择，加载大约70个选项。要求是预选所有可用的选项.从编程的角度来看，所有这些都是可行的。但是从GUI的角度来看，当所有选项都被预选时，Kendo multiselect在屏幕上看起来太大了，看起来不太适合用户使用。
是否有一种方式，我可以显示前几个(例如，5)预选的项目，然后显示一个自定义项目(例如，65多.)？提前谢谢你。
浏览 4提问于2017-04-20得票数 2
回答已采纳
1回答
我有多个select下拉列表，它应该将选定的项作为数据表中的行添加，并在数据表中未选中时将它们从数据表中删除。看上去就像这张照片。
。当我想添加其他列是在第一次选择之前是可以的，但是当想要列是在第一次选择之后，这是不可能的。
。
。我的脚本中有这段代码。
$('#displayInTable').select2({
placeholder: "Display in table",
allowClear: true
});
$('#displayInTable').change(function() {
table = $(
浏览 0提问于2018-04-12得票数 1
回答已采纳
我有一个jQuery Select2控件，它使用AJAX填充：
<input type="text" name="select2" id="select2" style='width:400px' value="999">
var initialSelection = { id: '999', text:"Some initial option"};
$("#select2").select2({
placeholder: "Selec
浏览 7提问于2014-08-21得票数 58
回答已采纳
2回答
我有一个select2，我只有在获得许可的情况下才需要创建标签。我需要通过用户id检查ajax的权限。
现在设置为tags: true，我可以随时创建新的标签。(ok)如果设置了tags: false，我就不能创建新的标签。(好的)
我尝试过使用tags：function() { return false; }，但似乎可以创建标记。(不好)
我的目标是拥有这样的东西：
tags: function() {
$.ajax({
type: "POST",
async: false,
dataType:"json",
url: &#
浏览 6提问于2018-07-20得票数 1
回答已采纳
1回答
是否有一个选项可以使用url从下拉列表中预选一项，其语法如下：
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#" data-filtervalue="value">Select Value</a>
</li>
我可以预选“值”吗？
提前谢谢你。
浏览 0提问于2017-04-20得票数 0
我正在使用select2与自定义数据适配器。提供给select2的所有数据都是在web页面中本地生成的(因此不需要使用ajax)。由于query方法可以生成大量的结果(约5k)，打开选择框的速度相当慢。
作为一种补救，我想使用无限的卷轴。自定义数据适配器的表示query方法应该与term一起接收page参数。
@param params.page应该加载的特定页面。这通常是在使用远程数据集时提供的，远程数据集依赖于分页来确定应该显示哪些对象。
但事实并非如此:只有term存在。我试图返回more: true或more: 1000，但这并没有帮助。我想这是因为，在默认情况下，。
我猜想，
浏览 11提问于2015-09-24得票数 12
回答已采纳
3回答
select2 -如何允许空值
、、、、
在一个表单中有多个select2元素。在特定的select2元素中，我用非空字符串'text‘和null’值‘设置了一些选项。提交表格的表现似乎如下：
如果'value‘不是空的，-> 'value’是'submit‘操作上提交的项
如果‘->’为空，则'text‘是'submit’操作上提交的项
这不是我要找的行为。当'value‘为null时，我如何提交'value’？我只想提交空！我在select2文档中找不到这样的东西。
浏览 3提问于2017-07-03得票数 10
回答已采纳
我使用select2来获取选中框中的值，但我的问题是，我只想获得选中框中的第一项--忽略逗号分隔的项，如下所示：
$(function() {
$('.select2').select2({
theme: "classic",
}).on('change', function(e) {
var dataselected = $.map($(".select2 option:selected"), function(el, i) {
return $(el).text();
});
浏览 0提问于2019-03-15得票数 0
回答已采纳
1回答
我在使用select2角和ng模型预选一个选项时遇到了问题。这是我的密码：
控制器中的角码
$scope.filter = {
searchValue: '',
departmentId: 'Department2'
}
<select
class="form-control"
ui-select2="{allowClear: true}"
ng-model="filter.departmentId">
<option value=""
浏览 2提问于2014-05-21得票数 3
我正在尝试自定义select2，并且当找不到项目时，我正在重写createSearchChoice以返回对象。
然后是.on('select2-selecting',，我将接受新创建的选项，并将其转换为“真实的”对象(持久化到服务器)。但是，现在创建的“临时”选项与对象不匹配，因此select2仍然将搜索词显示为选项，因为我创建了一个新的和不同的对象，并将搜索选项作为临时实体处理。
如何阻止select2从结果中追加任何先前创建的搜索选项？(理想情况下，我希望将select2从“知道”之前创建的搜索选项中清除掉)
浏览 3提问于2014-12-17得票数 1
回答已采纳
我的页面上有很多select2项目，它们都充满了条目。
我从一个模式中添加新数据，在模态关闭后，我用新的数据重新填充所有的select2。我发现select2丢失了所选的值!！
这是我使用的代码：
$.get(callPath, { }, function(dataDropDown) {
$('.'+ refInput).each(function(){
$(this).html(dataDropDown);
浏览 0提问于2016-07-28得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
