select2 ajax获取java后台下拉框数据 并回显选中的值 10C

用ajax 请求后台值后 发现 下拉框没有搜索功能了
图片说明

 * 执行select2方法初始化 */
function select2Execute() {

    var dataList = [
                    { id: 0, text: 'enhancement' }, 
                    { id: 1, text: 'bug' }, 
                    { id: 2, text: 'duplicate' }, 
                    { id: 3, text: 'invalid' }, 
                    { id: 4, text: 'wontfix' }
                  ];

    var dataList1=[{'id':"1","text":"enhancement"}];




    $(function() {
/*本地注入方式*/
        $(".downList2").select2({
//      $("select[name='xuewei_id']").select2({
            // $('select[id="xuewei_id"]').select2({
            // $('#xuewei_id').select2({
            // $("#selectSection").find("select.combox").select2({
            // $(".select2-selection__choice").select2();
            // $(".combox").select2({

            placeholder : "请至少选择一个人名",
            tags : true,
            createTag : function(decorated, params) {
                return null;
            },
            width : '256px',
            ajax: {
                url: '/erzhentang/manage/forAjax.do?requestType=12.5_1',
                dataType: 'json',
                data: function (params) {
                  var query = { //请求的参数, 关键字和搜索条件之类的
                    search: params.term //select搜索框里面的value
                  }

                  // Query paramters will be ?search=[term]&page=[page]
                  return query;
                },
                delay: 250,
                processResults: function (data, params) {
                  //返回的选项必须处理成以下格式
                  var results =  [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];

                  return {
                    results: results  //必须赋值给results并且必须返回一个obj
                  };
                }

              },
              allowClear: true,//允许清空
              escapeMarkup: function (markup) { return markup; }, // 自定义格式化防止xss注入
              minimumInputLength: 0,
              formatResult: function formatRepo(repo){return repo.text;}, // 函数用来渲染结果
              formatSelection: function formatRepoSelection(repo){return repo.text;} // 函数用于呈现当前的选择

        });

        //two  AJAX获取数据方式
        //$("select[name='xuewei_id']").select2({
        /*$(".downList2").select2({
          ajax: {
            type:'GET',
            url: '/erzhentang/manage/forAjax.do?requestType=12.5_1',
//          url: dataList1,
            dataType: 'json',
            delay: 250,
            data: function (params) {
              return {
                q: params.term, // search term 请求参数
                page: params.page
              };
            },
            processResults: function (data, params) {
              params.page = params.page || 1;
              var itemList = [];
              var arr = data.result.list
              for(item in arr){
                  itemList.push({id: item, text: arr[item]})
              }
              var itemList = [];
              var results = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];

              var arr = result.list

              for(item in arr){
                  itemList.push({id: item, text: arr[item]})
              }
              var results =  [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];
//            var results=[{"id":"68","text":"平和质"},{"id":"104","text":"特禀质"}]
              return {
//            results: data.items,//itemList
              results: results , //必须赋值给results并且必须返回一个obj
//            results: data,//itemList
                pagination: {
                  more: (params.page * 2) < data.total_count
                }
              };
            },
            cache: true
          },
          placeholder:'请选择',//默认文字提示
          language: "zh-CN",
          tags: true,//允许手动添加
          allowClear: true,//允许清空
          escapeMarkup: function (markup) { return markup; }, // 自定义格式化防止xss注入
          minimumInputLength: 0,
          formatResult: function formatRepo(repo){return repo.text;}, // 函数用来渲染结果
          formatSelection: function formatRepoSelection(repo){return repo.text;} // 函数用于呈现当前的选择
        });*/




        function formatState(state) {
            if (!state.id) {
                return state.text;
            }
            var $state = $('<span>' + state.text + '</span>');
            return $state;
        }
        ;

        $('#sel_recommender').select2({
            placeholder : "请选择一个人名",
            templateResult : formatState,
            width : '256px'
        });

        // 通过id获取select2的text值,这里的text值可能有空格,需注意
        function getSelect2Text(obj) {
            var select2Obj = $("select[name='xuewei_id']").select2();
            return select2Obj.find("option:selected").text();
        }


        /* 获取每一个name对应的值 */
        var strXueweiId = "";
        $("[name=xuewei_id]").each(function() {
            alert("this值:" + $(this).val());
            /* 拼接每一项name的值 组合成和其它项目类似 gender那样的数组 */
            strXueweiId += $(this).val() + "-";

        });
        alert("strXueweiId:" + strXueweiId)
        $("#strXueweiId").val(strXueweiId)


    });
}
0

2个回答

0

我好像用过,就是在标签里面添加一个搜索属性,是插件自带的

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
select2下拉框插件的使用,ajax请求
导入样式以及js。(jeesite已经在head.jsp中导入,不用自己导) &amp;lt;link href=&quot;/jquery-select2/3.4/select2.min.css&quot; rel=&quot;stylesheet&quot; /&amp;gt; &amp;lt;script src=&quot;/jquery-select2/3.4/select2.min.js&quot; type=&quot;text/javascript&quot;&amp;gt;&amp;
select2 ajax 远程获取下拉框默认显示数据, 无需输入
$(&quot;#domain_user&quot;).select2({ placeholder : '请选择', minimumInputLength : 1, //默认最少输入1位 language : &quot;zh-CN&quot;, width : &quot;137px&quot;, allowClear : true, ajax : { type : &quot;post&quot;, url : &quot;tudstat/ge...
使用select2下拉框ajax加载数据时,编辑赋值的方法
最近在做一个项目,项目地址: https://github.com/wangyuanjun008/wyj-parent.git 使用bootstrap select2下拉框插件,ajax从后台加载数据,保存编辑后,不知道怎么为下拉框赋值,下拉框代码如下: 使用状态: $("#sel_status").select2({ placeholder : "--请选择--", dr
select2下拉框多选进行回显
多选框进行回显   val() 里面放的是从后台传来的id集合。 $(&quot;#manageDistrict&quot;).val(${manageRegionIdList}).trigger(&quot;change&quot;);
select2多选设置select多选,select2取值和赋值
select2设置select多选,select2取值和赋值,作为筛选条件的时候,取值相对简单,把选中的id值转为字符串传给后端查询,查询之后会刷新页面,为了在下拉框中显示刚刚选中的值,就需要给select赋值,可以将刚才传给后端的字符串再传回前端,然后转为一位数组,再赋值给select2就会显示刚刚选中的值,赋值方法:$('#id').val(arr).trigger('change'),id为...
Select2插件的用法,通过ajax实现在下拉框中回显
一.文件需要引入select2.full.js、select2.min.css(4.0.1版本)和jquery.1.8.3及以上 最新版本的select2如果引用的jquery版本较低的话,某些功能无法正常使用。比如:清除功能allowClear: true 最新版本请使用标签(对于本地化的数据你可以使用input,但ajax远程数据必须使用select) 二.placeholder p
select2 ajax获取数据设置默认值,初始值
select2是一个非常好用的select美化插件,但是在最近使用时发现,select2在使用ajax获取数据内容时设置默认值非常麻烦,官方给出了一个解决方案就是添加一个属性selected的option:如果select的value值和text都已知的情况下,这种解决方案使用起来就非常容易而且好用了。但是在实际使用中如果要使用ajax来获取数据,如果select的value值和text不相同的时...
你知道吗,如何使用select2插件实现下拉框一次性选多个值、以及数据的回显
页面展示标签&amp;lt;td class=&quot;vatop rowform&quot; style=&quot;width:auto;&quot;&amp;gt;                    &amp;lt;select style=&quot;width: 285px;&quot; class=&quot;combox&quot; name=&quot;investmentMethod&quot; id=&quot;investmentMethod&quot; multiple   
Select2 多选框
1. 引入select,官网可以下载 2. 页面使用,select标签,本人用的velocity #foreach($bdoPO in $cateList) $bdoPO.cateName #end
Select2插件ajax方式加载数据,编辑数据回显
项目中用到了select2.js插件的ajax方式加载数据,在编辑数据的时候需要回显,找了很多文章,都不能正常回显,谷歌之后在官方的github上找到些蛛丝马迹,终于做了出来。 引js和css 初始化 下面是我在项目中的初始化方式。第三个函数echoSelect2就是回显数据用的。 function initSelect2(dom,url,multiple){ var subje...
Jquery select2 AJAX获取json数据后无法选中
今天在使用select2 获取json数据填充后 无法选中下拉选项。 原因如下:select2默认的数据属性是id、text 所以需要将返回的数据格式 按照var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid
select2读后台数据回写显示不出来问题
这里写自定义目录标题错误截图错误原因分析解决方案问题解除后效果展示 错误截图 错误描述:非select2插件元素可正常回写,但select2插件干涉的显示框无法正常回写。 错误原因分析 分析:直接请求数据库返回结果如图 我们冲数据库读到的信息为字符串,而select2插件的配置是要一个json对象 解决方案 在controller层–&amp;gt;angularJs 处理返回数据结果,将其解析为Js...
Select2-Ajax获取数据
文章最初发表于szhshp的第三边境研究所 转载请注明 遇到一个需求: 在前端使用Select2设计一个联想输入dropdown, 通过Ajax动态抓取数据如果用纯H5来实现极其简单, 这里需要用Select2插件来实现可以也使用H5原生onChange来进行动态提交但是这太愚蠢了, 现成的Select有更好的API啊花了俩小时完成了这个功能, 官方Doc说的很是模糊..代码细节:$('sel
select2 ajax 设置默认值,初始值
在做功能的时候需要修改数据, 修改数据时需要显示原始值. 但是在select2的时候 显示原始值是一个非常非常非常非常非常要命的难题. 研究了3个小时, 最后使用$.ajax 重新加载原始值.初始值 并显示.
select2 动态下拉框插件以及开发心得
select2 动态下拉框插件以及开发心得
select2控件回显方法
JavaScript 技术: select2控件选择多个数据,以及回显数据的方法 。
多选下拉框的回显(Select)
多选下拉框打印时候是已数组形式展现的,按这种思路: [code=&quot;java&quot;] ... 1.获得下拉框的值(转换string):$('#extensionName').val().join(',') 2.设置多选下拉框选中: $('#extensionName').val(treeNode.extensionName ? treeNode.extensionName.spli...
jQuery select2设置默认值从列表中的一个选项
&amp;lt;link href=&quot;/static/jquery-select2/3.4/select2.min.css&quot; rel=&quot;stylesheet&quot; /&amp;gt; &amp;lt;script src=&quot;/static/jquery-select2/3.4/select2.min.js&quot; type=&quot;text/javascript&quot;&amp;gt;&amp;lt;/script&amp;gt; &amp;
bootstrap select2插件用ajax来获取和显示数据
用select2插件,实现以下这个选择框: 1、html代码 预定义参数 2、js代码 $("#preParamDefine").select2({ //data: data, placeholder:'请选择',//默认文字提示 tags: true,//允许手动添加 allowClear: true,//允许清空
动态获取下拉列表并回显
下拉列表通过jquery ajax直接返回option html 页面:html type="text/javascript"> $(function(){ $("#select1").one("click", function(){ choose(this); }); $("#select2").one("click", function(){ choose(t
Select2初始化,Ajax传值
问题:想实现select2的下拉初始化,第一次使用。和普通select获取值的方式不一样,所以一直未解决!大神指点:1,select2默认值(Key)得形式是id和 text形式,需要循环进行解析2,HTML引入太多select的css样式,只需要引用select2.min.css和select2.min.js即可实例:HTML文件&amp;lt;select id=&quot;branchAllList&quot; cla...
select2 选择的内容不能显示问题
最近做页面弹窗,遇到一个多选框(select2 multiple),编辑的时候,在打开modal之前先给各个元素赋值,但对多选框赋值时,出现问题了,下拉框中的option选项可以选中,但是输入框中却不显示选中项的text. 原来的select赋值代码(给5个多选框赋值): var mutli_html = {'mult_user': res.user, 'mult_user_group': r
Select2下拉框绑定数据
//初始化select2控件         $(document).ready(function () {             $("#XueYuan").select2({ placeholder: '请选择' });         });   $.ajax({             url: "/XSSSPGYPY/XSPY/SelectXueYuan",    
对select下拉框的回显数据的处理
一:目前在spring MVC 中使用的,---------------可以
select2 插件 获取多选和单选选中值。value和text
一:获取select2选中项option的value和text,多选用jsonarry格式返回       单选:         //该方法也可以获取多选的数据,但是val 是以list返回的,而text会以一条字符串返回。         var  val= $('#company_kh').val();         var  text=$('#company_kh option:...
获取select和select2当前选中项的值
var ID = $(&quot;#ID option:selected&quot;).val();//获取value值 var ID = $(&quot;#ID option:selected&quot;).text();//获取text值 select和select2使用都一样
Jquery获取下拉框被选中的value值,并传到后台,然后后台回显到界面
Js部分: $(function(){ //回显 schoolCode 下拉框id ${schoolCode} 后台放作用域里的值 $("#schoolCode option").each(function(){ if($(this).val() == '${schoolCode}'){ $(this).attr("selected", true); } }); }); $('
bootstrap select2使用总结
select2的几种常用方法总结,把代码放到相应的地方就能使用了。不过前提需要下载select2哦!
select2下拉框去除已经选中的值
/* 设置select2选中项不显示 */ .select2-results__option[aria-selected=true]{ display:none; }
Select2在使用ajax获取远程数据时显示默认数据
假设我需要在我的select2中默认添加一个之前从服务器上获取过的数据,通过以下方法实现。实测可行~var value = 1 var text = '默认文本' $('.selecter').html('<option value="' + value + '">' + text + '</option>').trigger("change")以上代码其实就是将class="selecter"的s
select2插件设置选中值
在select2中,设置指定值为选中状态$(&quot;#select2_Id&quot;).val(&quot;XXXXX&quot;).select2()或者$(&quot;#latnId&quot;).val(&quot;XXXXX&quot;).trigger(&quot;change&quot;);第二种方法会出发change事件如何获取select2,多选的值 var data = $(&quot;#latnId&quot;).select2(&quot;data&quot;)...
javascript 入门 之select2获取远程数据
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;/&amp;gt; &amp;lt;meta lang=&quot;zh&quot;/&amp;gt; &amp;lt;title&amp;gt;select2&amp;lt;/title&amp;gt; &amp;lt;script src=&quot;j
thymeleaf中的下拉框(select option)回显选中
介绍: 最近使用thymeleaf模板引擎做二手商城项目,在用户修改自己出售的商品信息的时候需要将数据从数据库中查询出来在前端页面进行数据的回显。在input框中的数据回显都没有问题,但是到select框回显的时候却遇到了一些麻烦。特此记录以便查阅! 正确方式如下: 使用thymeleaf的switch和case来进行判断,将所有的selected属性都设置为selected,将要选中的值与所有的...
Thymeleaf select回显并选中多个
哇.各种搜索,国内几乎找不到thymeleaf回显多个的。都是用什么 th:field ,试了根本没用啊。(而且我去官网没有看到这个filed的介绍,如果有详细说明的请滴滴我) 通过国外的论坛,发现了解决方式超级简单: rolelist用来回显列表,roleIdlist用来回显选中多个数据。 th:selected=&quot;${roleIdList.contains(role.id)}&quot; ...
关于bootstrap框架中select2的多选问题
1.类似普通select 标签一样 select id="user_Level" class="form-control" multiple="multiple"> option value="10">VIPoption> option value="20">管理级别option> option value="30">成员option> select> 唯一区别就是
thymeleaf下拉框从后台动态获取集合数据并回显选中
&amp;lt;select name=&quot;supplierCode&quot; lay-search=&quot;&quot;&amp;gt; &amp;lt;option value=&quot;&quot;&amp;gt;请选择供&amp;lt;/option&amp;gt; &amp;lt;option th:selected=&quot;${res.supplierCode e
select2 Ajxa 请求后台数据 并默认选中第一个数据
1、页面添加 html并引用 select2 js&amp;lt;label class=&quot;sech-label&quot;&amp;gt;账号:&amp;lt;/label&amp;gt; &amp;lt;select data-live-search=&quot;true&quot; id=&quot;grpDownList&quot; name=&quot;grp&quot;&amp;gt; &amp;lt;option value=&quot;&quot; selected=&quot
jquery select2设置选择的值
(function($){ selections = [ {id:1,text:'Enhancement'}, {id:2,text:'Bug'}, {id:3,text:'Duplicate'}, {id:4,text:'Invalid'}, {id:5,text:'Won\'t Fix'} ];
Angular2 select用法-设置默认值和事件
angular2支持双向绑定,在使用select下拉框主要通过ngModel和ngModelChange实现选择事件比如现在有三个学生小明,小红,小黑,对双向绑定的student设置你想要的select值就可以在下拉框默认选中let students:string[]=['xiaoming','xiaohong','xiaohei']; let student:string=''; let info
重置select2下拉框为初始选中状态
$(&quot;#元素ID option:first&quot;).prop(&quot;selected&quot;,'selected');         $('#元素ID').trigger('change.select2');
文章热词 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型 设计制作学习
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 java后台学习 java后台的学习