layui 使用xmSelect组件多选下拉

在开发过程中，有使用layui框架和xmSelect组件做一个多选的下拉框功能，但是在表单中可能会有多个的多选下拉框组件，所以我们希望把它封装成一个方法，通过传递不同的参数，实现多个下拉框组件，
这里后台要求提交表单的数据格式是formData,所以在这里面又会有几个问题了。
1.表单提交的数据中，xmSelect下拉框组件在提交表单的数据中他的字段名是select，使用多个下拉框那么在表单中就会有多个select,传递给后台的字段名对不上。
2.在传递多选下拉框值的时候，后台可能会对与这个字段值会要求是数组，然而formData中传递数组，会把参数解析成字符串给后台，所以这个不符合条件
3.传递给后台的下拉框的字段值是数组时，回显的时候前端把它转为数组回显时，再去修改下拉框时，会遇到去除选中项，要点击两次的情况(不知道其他人有没有遇到过)，猜测是因为回显数据是返回的是一个字符串，前端再把字符串转为数组，渲染到页面的时候，可能是数据渲染出了问题。如果传递的是一个数组就不会有这个问题。

对于多个下拉框进行取值

这样根据ID取出的数据是一个字符串

var vallist = xmSelect.get('#demo1', true).getValue('valueStr');  //  获取选中的Id并用 "," 拼接。
var namelist = xmSelect.get('#demo1', true).getValue('nameStr');  //  获取选中的name并用 "," 拼接。
1
2

转换成一个数组

var vallist =  xmSelect.get('#demo1',true).getValue('valueStr').split(',')
var namelist =  xmSelect.get('#demo1',true).getValue('valueStr').split(',')
1
2

在formData添加数组时，会有一个的问题，就是post请求会把数组拼接成一个字符串发送给服务器。

这种时候有两种解决方案
一、后台拿到字符串后，再通过截取字符串来生成数组

二、对数据进行字符串化，即JSON.stringify()

1.创建formData传递参数，这里把获取到的多选的值塞进formData中并把xmelect自带的select删除
let formData = new FormData();
 formData.append('vallist ',JSON.stringify(vallist))
 formData.delete('select')
1
2
3
4

1.创建formData，直接以提交整个表单的形式，不用一个个字段塞值，这里把获取到的多选的值塞进formData中
并把xmelect自带的select删除
var formData = new FormData($("#contract_form")[0]);
 formData.append('vallist ',JSON.stringify(vallist))
 formData.delete('select')
1
2
3
4
5