select2选择的value传不到后台

发布时间:2020-07-31 10:08:47 作者:Beyond_奈何
来源:网络 阅读:1917

近期项目中使用select2作为输入产品控件
假设有这样的标签是用select2初始化的:

<select id="selectId"></select>
var option = $("#selectId").select2("data")[0];
//选项的值:
var value = option.id;
//选项显示文本:
var text = option.text;

select控件的option都有一个value属性和一个text显示文本(如上所示),测试发现控件使用过程中,显示文本这个值有的时候无法传到后台,并且是有点时候出现,大部分是正常的。

困扰了一段时间,找到了原因,select2是配置了可输入的,且请求后台数据:
select2选择的value传不到后台

select2的dropdown打开之后,输入一个内容:abc

这里有一个奇怪的现象,同样的操作会出现不同的结果,下面的第一种
select2选择的value传不到后台
第二种
select2选择的value传不到后台
至于哪里能控制我还没找到原因,下面回到正题

abc这个值经过筛选没有找到,返回一个新创建option,也就是上面第二种情况,它会自动录入到select标签中,在某些情况是会自动关闭的(比如点击select之后,dropdown打开,鼠标再点击屏幕其它区域,就是dropdown以外的区域,它会关闭),这时点击其它地方它自动关闭,这样外表看似已经选择了,但是隐藏传值的标签并没有赋值,提交后台自然就是空的

之前代码中只加了onchange事件,在鼠标点击和回车之后会触发这个change方法,但是它自己关闭的的情况不会触发,就不会给隐藏的name赋值,也就传不到后台

解决过程:
添加onchange事件之后,也要添加select2:close事件,在close事件中给隐藏标签赋值,理论上在dropdown关闭的时候会触发

这样修改之后引起的了别的问题(下面的问题项目代码具体处理情况有关,并不是上面的select2:close事件不好用),我当时修改的上面的close事件和change触发同一个方法,这样导致每次选择都会调用两次赋值方法,并且还发现了另外的问题:

select2:unselecting事件在点击清除小叉号执行信息清空,清空之后会出现其他选项
select2选择的value传不到后台

比如点击select之后出现下面的选项:
select2选择的value传不到后台
我选择:1243
select2选择的value传不到后台
再点击选择234,再点击选择214
select2选择的value传不到后台
然后我点击右边的小叉号清除,然后录入一个不存在的选项:abcdefg
select2选择的value传不到后台
这个时候select标签下会有四个option:
select2选择的value传不到后台
这个时候点击右侧小叉号,理想结果是这样的:
select2选择的value传不到后台
实际上他是这样的:
select2选择的value传不到后台
它自己默认把第一个option当做选项,实践证明:

只有可手写输入的选项删除时,如果之前选择过其他的选项(就是select标签下有option)情况下才会这样,除此之外不会。

解决办法:在点击小叉号触发的方法里面,把select标签下所有的option都删除。

上面是我目前的处理方式,如果以后发现更好的再来更新。

推荐阅读:
  1. Key-Value数据库:Redis与Memcached之间如何选择?
  2. select2赋值问题

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

select2 sel 传值

上一篇:css中常见的布局方式有哪些

下一篇:linux系统的优缺点有哪些

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》