首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在nette中通过AJAX使用带有数据的select2插件进行多选返回一个空数组

的问题,可以通过以下步骤解决:

  1. 首先,确保你已经在nette中正确引入了select2插件和相关的AJAX库。
  2. 在前端页面中,使用HTML和JavaScript创建一个带有数据的select2多选框,并设置好相关的属性和事件。例如:
代码语言:txt
复制
<select id="mySelect" multiple="multiple">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

<script>
$(document).ready(function() {
  $('#mySelect').select2({
    ajax: {
      url: 'your_ajax_endpoint',
      dataType: 'json',
      processResults: function(data) {
        return {
          results: data
        };
      }
    }
  });
});
</script>

在上述代码中,your_ajax_endpoint是你的后端处理AJAX请求的URL,它应该返回一个包含选项数据的JSON数组。

  1. 在nette的后端代码中,创建一个处理AJAX请求的方法,并返回一个包含选项数据的JSON数组。例如:
代码语言:txt
复制
public function handleAjaxRequest()
{
  $data = [
    ['id' => 1, 'text' => 'Option 1'],
    ['id' => 2, 'text' => 'Option 2'],
    ['id' => 3, 'text' => 'Option 3']
  ];

  echo json_encode($data);
  exit;
}

在上述代码中,$data是一个包含选项数据的数组,你可以根据实际需求从数据库或其他数据源中获取数据。

  1. 在nette的路由配置中,将your_ajax_endpoint映射到上述后端方法。例如:
代码语言:txt
复制
$router->addRoute('GET', 'your_ajax_endpoint', 'YourController:handleAjaxRequest');

确保将YourController替换为你的实际控制器类名。

  1. 最后,当用户在select2多选框中选择了选项后,通过AJAX请求将选中的值发送到后端进行处理。你可以在select2的change事件中实现这个功能。例如:
代码语言:txt
复制
$('#mySelect').on('change', function() {
  var selectedValues = $(this).val();

  $.ajax({
    url: 'your_backend_handler',
    type: 'POST',
    data: { selectedValues: selectedValues },
    success: function(response) {
      console.log(response);
    }
  });
});

在上述代码中,your_backend_handler是你的后端处理选中值的URL,你可以在后端方法中将选中的值存储到数据库或进行其他操作。

通过以上步骤,你可以在nette中通过AJAX使用带有数据的select2插件进行多选,并将选中的值发送到后端进行处理。如果没有选中任何值,后端将返回一个空数组作为结果。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

select2 使用教程(简)「建议收藏」

,q发生到服务器参数名;所以这里你可以添加自定义参数,如:stype:’person’) 2.processResultsresults: data返回数据返回最终数据给results,...如果我数据data.res下,则返回data.res。...2、Select2控件实际使用代码分析 1)基础界面代码及操作 使用select2控件,一般是常规select控件上,设置一下即可(设置它class为select2)。...select> 2)异步数据绑定操作 一般情况下,我们select控件数据,是从数据库里面动态加载,因此一般是通过Ajax方式获取数据进行绑定即可。...cityName="+ cityName); }); } 而其中MVC控制器返回数据,我们是返回一个JSON数据列表给前端页面的,他们数据格式如下所示。

20.2K20

laravel框架select2多选插件初始化默认选中项操作示例

本文实例讲述了laravel框架select2多选插件初始化默认选中项操作。分享给大家供大家参考,具体如下: 项目中有发送消息功能,需要能通过搜索,多选用户,来指定发送人。...使用 select2 插件来完成。... //注意数据必须要有二个属性,id和text,分别对应optionvalue和文本 //网上有些说无法选中元素,请先检查这里,你是否设置了id,并且不为 $(...multiple: true, allowClear: true }); 后端返回数据如下,直接使用 laravel paginate() 方法 返回分页数据。...$("#spread_select").val([1, 2]).trigger("change"); 但是我们这里select2option是通过ajax动态加载,刚进页面时,select2ajax

2.7K51

select2 api参数文档

tokenSeparators 函数 一个字符串数组定义标记为默认分隔符 分词器 功能。 默认情况下,此选项设置为一个数组标记这意味着使用默认 编译器是禁用。...这个对象作为快捷方式有手动编写一个函数,执行ajax请求。 内置函数支持更高级特性,比如节流和无序反应。 data 数组/对象 择建在查询功能,使用数组。...tags 数组/函数 将Select2放入“标签'mode,用户可以添加新选择和预先存在标签是通过提供 这个选项属性是一个 数组 或者一个 函数 返回一个 数组 对象 或 字符串 。...一个对象包含css属性/值密钥对或一个函数,这个函数返回一个对象。 containerCssClass 函数/字符串 Css类将被添加到select2容器标签。...dropdownCss 函数/对象 内联css将被添加到select2下拉容器。 一个对象包含css属性/值密钥对或一个函数,这个函数返回一个对象。

5.8K50

基于MetronicBootstrap开发框架经验总结(3)--下拉列表Select2插件使用

在上篇《基于MetronicBootstrap开发框架经验总结(2)--列表分页处理和插件JSTree使用》介绍了数据分页处理,使用了Bootstrap Paginator插件,另外对树形列表,采用了...2、Select2控件实际使用代码分析 1)基础界面代码及操作 使用select2控件,一般是常规select控件上,设置一下即可(设置它class为select2)。...select> 2)异步数据绑定操作 一般情况下,我们select控件数据,是从数据库里面动态加载,因此一般是通过Ajax方式获取数据进行绑定即可。...cityName="+ cityName); }); } 而其中MVC控制器返回数据,我们是返回一个JSON数据列表给前端页面的,他们数据格式如下所示。...我们从案例里面可以看到,Select2支持多项值选择,它们保存后会以逗号分开,如果我们需要在编辑时候显示存储多个记录,那么需要把字符串转换为数组列表才能进行正确绑定,如下所示。

4.1K90

ui-select官方教程(二)——ui-select指令

ui-select指令 ui-select指令和事件 属性 选项 描述 值 默认值 multiple 多选,直接加上multiple属性 close-on-select 多选情况下,选中一项,就关闭下拉项...boolean true append-to-body 多选情况下,选中项追加显示 boolean false ng-disabled 控件被禁用 boolean true ng-model 控件绑定对象...定义一个监听事件名字(e.g. focus-on='SomeEventName') String undefined limit 限制多选择模式选择项目数 integer undefined 事件...app',['ui.select']); app.config(function(uiSelectConfig) {uiSelectConfig.theme = 'bootstrap'; }); 或者标签属性设置...="stylesheet"href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.css"> 配置 app.config(function

2.6K10

yii2组件之下拉框带搜索功能示例代码(yii-select2)

//如果你表单是ActiveForm,请使用 use kartikselect2Select2; //$data是键值对数组哦,key-value ,下面所声明所有$data均为键值对数组,以该数组为例...'multiple' => true, 'placeholder' => '请选择 ...'], ]); 多选添加默认值同上 眼尖注意到了,加了一个multiple选项。...举一个例子,我们现在要查询某一个书名,但是我们数据量大概有100W,很简单,这需要我们根据你搜索结果异步获取下拉框里面的数据。未完待续,晚点做进一步说明。...来,上家伙,我们来看看如何使用异步搜索功能,工作尤其是进行关联数据时候其用途更是大大,方便性嘛,看看就知道了,好用不得了。...> 上面的代码可直接复制使用,唯独需要修改就是ajax里对应url地址。下面我们看看controller层代码是怎么提供数据

1K20

关于 devbridge-autocomplete 插件多选操作实现方法

目前据我所知最好用 autocomplete 插件就是 jquery-ui autocomplete 以及 devbridge autocomplete 插件。...我最终选择了 devbridge autocomplete 插件,主要是不想引用 jquery-ui css 文件。...:服务器端URL或者是返回 Url 字符串回调函数 ajaxSettings:jQuery Ajax 请求额外配置 lookup:查询数据列表。...params:参数传递请求,可选 formatResult:function (suggestion, currentValue) {} delimiter:字符串或正则表达式,分割输入值并将最后一个作为查询词...,默认值:false appendTo:查询列表容器被添加到那个元素,默认值:document.body dataType:服务器返回数据格式 showNoSuggestionNotice:如果查询结果为是否有提示语

1.5K80

select 遇到

1.2     多选:$('#id').val( array );     //这里必须将多个值组成字符串(或者其他非数组)转化成数组                1.2.1     字符串转数组:...1.2.3     类似的splice()方法改变原数据,slice方法创建新数据,不改变原数据      2、select没有特定option选项,但是需要将此值设为默认值(业务需求)          ...2.1     概念性理解:select赋值(或者默认值)是建立option选项存在条件下(optionvalue),没有某option,则该值无法被赋值           2.2     将该...但是此时disabled数据,后台无法获取---》可以提交时候,将原本disabled数据变为可编辑           《 $('.disabled').attr("disabled", true...3、使用select2插件,select框需要设置互斥选项     (例如:当选择全部时候,其他选项清空只有全部,当选择其他选项时,没有全部这个选项,即互斥。

1.1K100

bootstrap-typeahead 自动补全简单使用教程

1、bootstrap-typeahead 自动补全简单使用教程,自动补全,使用起来看似很厉害样子,同事使用select2,我们老总建议我用是typehead,发现typehead...并不是很好使,先简单把使用过程总结一下,然后再使用select2看看,那个更加方便一些吧,毕竟用起来心累东西,确实很难受啊。...案例四,是使用ajax从后台查询出数据,这个自己摸索格外头疼,一开始不知道source方法query参数如何传递进行,其实使用案例四格式以后, 就将query数据传递进去了,不用其他操作或者定义变量...147 //如果你希望通过 Ajax 调用从服务器端获取匹配数据,那么,异步完成处理函数, 148 //你需要获取一个匹配字符串数组...,由于你输入一个字母都开始请求后台,所以这里定义变量用于states = arr;赋值,避免出现数组里面存放多次返回结果。

1.7K30

jQuery 快速入门教程

jQuery,我们一般通过一个字符串来标识匹配元素,例如: $("#uid"); // 选取id属性为"uid"单个元素 $("p"); // 选取所有的p元素 $(".test"); // 选择所有带有...简而言之,假设当前jQuery对象匹配多个元素,如果使用jQuery对象方法来获取数据(“读”数据),则只会获取第一个匹配元素数据;如果使用jQuery对象方法来设置元素数据(“写”数据),则会对所有匹配元素都进行设置操作...如果该方法用于获取数据,则返回null或undefined;如果该方法用于设置数据,则忽略设置操作,并返回对象本身;如果该方法用于筛选元素,则同样返回一个jQuery对象。...属性操作 jQuery,对DOM元素进行属性操作,主要是通过以下方法实现: // selector 表示具体选择器 $("selector").val(); // 获取第一个匹配元素value...在此之前,我们应该先了解jQuery对象所包含DOM元素是存储什么属性。 实际上jQuery对象是一个数组对象。

13.6K30

select2如何黏贴选择

有时使用select2插件时会遇到这种需求:一次性选择一些数据,然后根据这些数据自动选择相关项,我也遇到了这种需求并实现,这里简单讲讲我做法: 1.首先我修改了select2源码,增加了一个方法paste...并在AllowedMethod数组添加自定义方法 paste:function(items,selId){ var datas = this.opts.data; var values=[];...paste方法,paste方法完成数据选择 //由于select2重载了select元素,真正操作都是操作select2插件创建元素,笔者定义select2元素id为multiple-import-orgId...,s2id_multiple-import-orgId则是select2插件创建select元素id $("#s2id_multiple-import-orgId").on('paste',function...$(selId).select2('paste',items,selId); //selId为select2插件id }); 通过上面代码,相信都已经明白了其中原理

1.1K20

django form规则组件笔记(附代码)

目录 1 为什么要使用这个 2 form案例 3 form 自定义错误信息 4 form内部原理 5 ajax传值 6 返回数据为json格式 7 验证格式错误 8 自定义正则表达式 9 form 内置字段...10.0 choices选项可以从数据获取 10.1 RadioSelect (单选框) 10.2 SelectMultiple(下拉框多选) 10.3 Django内置插件: 10.4 NumberInput...1 写一个form.py文件 里面就是写对一个规则,比如用户登录规则,对用户名密码长度进行判断 from django.forms import Form from django.forms...,键是和其他属性一样,值就是自定义错误信息 4 form内部原理 5 ajax传值 6 返回数据为json格式 前端ajax进行接收 7 验证格式错误 1 比如要验证前端传过来是不是数字...admin后台新增页面,或者修改页面的时候,就可以根据这个属性进行自定义标签形式; 10 widget属性可以定义html哪些插件 10.0 choices选项可以从数据获取 方式一: from

95310

jQuery 教程

简短地说,不重载整个网页情况下,AJAX 通过后台加载数据,并在网页上进行显示。 使用 AJAX 应用程序案例:谷歌地图、腾讯微博、优酷视频、人人网等等。...下面的例子使用 $.get() 方法从服务器上一个文件取回数据: <!...inArray() 在数组查找指定值并返回索引值(如果没有找到,则返回-1) $.isArray() 判断指定参数是否是一个数组 $.isEmptyObject() 检查对象是否为(不包含任何属性...() 指定函数处理数组每个元素(或对象每个属性),并将处理结果封装为新数组返回 $.merge() 合并两个数组内容到第一个数组 $.noop() 一个空函数 $.now() 返回当前时间 $....对DOM元素数组进行排序,并移除重复元素 $.uniqueSort() 对DOM元素数组进行排序,并移除重复元素 $.data() 指定元素上存取数据,并返回设置值 $.hasData() 确定一个元素是否有相关

17K20

Vue快速入门(二)

: 检测不到变动数组操作: 解决方法: 数据双向绑定 事件处理 过滤案例 事件修饰符 按键修饰符 表单控制 checkbox单选 checkbox多选 radio单选 总结 v-model进阶 v-model...(列表)、对象(字典)、数字 遍历对象 v-for遍历对象,python显示是kv,但是在这里顺序相反,显示是vk <!...Vue数组index和value是反 对象key和value也是反 key值 解释 vue中使用是虚拟DOM,会和原生DOM进行比较,然后进行数据更新,提高数据刷新速度(虚拟DOM...this.newList = this.dataList.filter(item => { // item.indexOf(this.myText):输入框输入字符串筛选元素索引...,如果想要this指向对象始终是一个对象,比如始终指向Vue对象,可以通过 var _this=this来指代,或者使用箭头函数 var a = function(name) { console.log

3K20

JqueryForm使用方式

Options只是一个JavaScript对象,它包含了如下一些属性与值集合: target 指明页面由服务器响应进行更新元素。...beforeSubmit”回调函数带三个调用参数:数组形式表单数据,jQuery表单对象,以及传入ajaxForm/ajaxSubmitOptions对象。.../ 现在可以使用$.get、$.post、$.ajax等来提交数据 $.post('myscript.php', queryString); fieldSerialize() 将表单字段元素串行化...从0.91版起,该方法将总是以数组形式返回数据。如果元素值被判定可能无效,则数组,否则它将包含一个或多于一个元素值。 可链接(Chainable):不能,该方法返回数组。...该方法将所有的文本(text)输入字段、密码(password)输入字段和文本区域(textarea)字段置,清除任何select元素选定,以及将所有的单选(radio)按钮和多选(checkbox

2.3K20

基于MetronicBootstrap开发框架经验总结(7)--数据导入、导出及附件查看处理

很多系统模块里面,我们可能都需要进行一定数据交换处理,也就是数据导入或者导出操作,这样批量处理能给系统用户更好操作体验,也提高了用户录入数据效率。...我较早时期EasyUIWeb框架上,也介绍过通过Excel进行数据导入导出操作,随笔文章为《基于MVC4+EasyUIWeb开发框架经验总结(10)--Web界面上实现数据导入和导出》,本文基于...,那么我们还可以弹出一个对话框用然后选择具体信息,最后才提交数据到后台进行处理。...-附件上传组件uploadify使用》以及《Web开发文件上传组件uploadify使用》。.../// 一般规则如果是图片文件,返回视图URL地址'/FileUpload/ViewAttach'; /// 如果是Office文件(word、PPT、Excel)等,可以通过微软在线查看地址进行查看

1.6K70

项目开发知识盲区记录

,因此使用springboot模板引擎进行渲染时,会报错误,解决方法如下: 从ajax回调函数(success等)返回值 layui-table表复选框勾选所有行数据获取 html网页什么样字体最好看...,客户端浏览器获取ajax异步结果时,不是直接显示页面上,而是要通过js来进行处理,js处理完以后才能显示页面上,所以这才导致了controllerModelAndView对象不能直接返回视图...layui分页失效问题 layui数据表格分页无法正常显示 ---- layui数据表格cols属性设置列二维数组[[…]]和thymeleaf语法重复,因此使用springboot模板引擎进行渲染时...回调函数(success等)返回值 对于ajax,一般情况下我们都是success函数中进行逻辑处理, 但是在某些特定时候我们需要在ajax外对返回进行处理,这时我们只需要进行下面两个操作:...请求,来获取数据,回显多选下拉框 使用ajax发送请求,记得设置响应数据格式为json,不然默认是text文本 //课程分类下拉多选框--courseType var types

6.8K31
领券