近期项目中使用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的dropdown打开之后,输入一个内容:abc
这里有一个奇怪的现象,同样的操作会出现不同的结果,下面的第一种
第二种
至于哪里能控制我还没找到原因,下面回到正题
abc这个值经过筛选没有找到,返回一个新创建option,也就是上面第二种情况,它会自动录入到select标签中,在某些情况是会自动关闭的(比如点击select之后,dropdown打开,鼠标再点击屏幕其它区域,就是dropdown以外的区域,它会关闭),这时点击其它地方它自动关闭,这样外表看似已经选择了,但是隐藏传值的标签并没有赋值,提交后台自然就是空的
之前代码中只加了onchange事件,在鼠标点击和回车之后会触发这个change方法,但是它自己关闭的的情况不会触发,就不会给隐藏的name赋值,也就传不到后台
解决过程:
添加onchange事件之后,也要添加select2:close事件,在close事件中给隐藏标签赋值,理论上在dropdown关闭的时候会触发
这样修改之后引起的了别的问题(下面的问题项目代码具体处理情况有关,并不是上面的select2:close事件不好用),我当时修改的上面的close事件和change触发同一个方法,这样导致每次选择都会调用两次赋值方法,并且还发现了另外的问题:
select2:unselecting事件在点击清除小叉号执行信息清空,清空之后会出现其他选项
比如点击select之后出现下面的选项:
我选择:1243
再点击选择234,再点击选择214
然后我点击右边的小叉号清除,然后录入一个不存在的选项:abcdefg
这个时候select标签下会有四个option:
这个时候点击右侧小叉号,理想结果是这样的:
实际上他是这样的:
它自己默认把第一个option当做选项,实践证明:
只有可手写输入的选项删除时,如果之前选择过其他的选项(就是select标签下有option)情况下才会这样,除此之外不会。
解决办法:在点击小叉号触发的方法里面,把select标签下所有的option都删除。
上面是我目前的处理方式,如果以后发现更好的再来更新。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。