layui下拉框取val值和text值并传到后台

下面是一个简单的layui数据模板下拉框
第一步
<form class="layui-form" id="edittraps">
<div class="layui-input-block">
    <select name="pmUuid"  lay-filter="filter" id="names">
        <option value=""></option>
        {{#  layui.each(d.data, function(index, item){ }}
        <option value="{{item.uuid}}">{{item.userName}}</option>    //把要取的值赋在value上；要显示的文本赋值在text
        {{#  }); }}
        {{#  if(d.data.length === 0){ }}
        无数据
        {{#  } }}
    </select>
</div>
<button class="layui-btn my-add-btn " lay-submit lay-filter="add" >保 存</button>
</form>

第二步
var userName=null;  //定义一个空值
form.on('select(filter)', function(data){
    userName=data.elem[data.elem.selectedIndex].text;  //取选中下拉框的文本并赋值给userName
});

第三步
form.on('submit(add)', function (addform) {   //addform是form表单中所选中所有数据 addform.field 为表单中的值
    addform.field.userName=userName;   //把userName的值赋给要传入后台的对象
    $.ajax({
        url: api_committee_add,
        type: 'post',
        data: addform.field,
        dataType: 'json',