下拉选必填不为空html代码,easyui-combogrid必填为空时无法通过表单验证的问题

在使用easyui-combogrid时，由于html解析出的格式是如下三层：

注意到最外层的display:none，所以直接在样式中添加required="required"是不起作用的娥，而真正提交的input却是hidden。

第一层是一个display:none的下拉数据表格框；

第二层是一个validate-box，验证框；

第三层是一个显示属性为hidden，隐藏的文本框。

选择一项下拉值后发现，第一层的value，值为空，第三层的文本框值却不为空。那么问题就出现在第一层，因为它自动解析了一个display:none，同时我又在页面添加了必填属性，required：true，但是它又没有拿到值，所以就是那个报错的原因：一个隐藏的必填项为空。

前台html代码是自动解析的，无法更改，也就意味着无法去掉display:none属性，那么只能去掉必填属性，required：true.但是需求中又明确要求必填，那么只能在js中试试，是否能够识别必填属性：

/*********下拉数据表格*******/

$('#tx').combogrid({

panelWidth: 700,

panelHeight:500,

idField: 'value',

textField: 'value',

url:'getTx.do',

method: 'post',

fit: false,

fitColumns: false,

required: true,

editable:false,

columns: [[

{field:'value',title:'value'},

{field:'note',title:'note',align:'left'}

]],

onLoadSuccess:function(){ //修改页加载表格数据

$('#tx').combogrid('setValue', '${dto.tx}');

}

}

});

测试发现，无论是否有值，都会提示必填。这说明必填属性起作用了，但是这个框没有拿到值。那么此时的隐藏项就只剩下最后一层了，那个type=”hidden”的文本框，这样问题就简单多了，在下拉框选中值之后，将下拉框的值手动赋给这个文本框：

/*********下拉数据表格*******/

$('#tx').combogrid({

panelWidth: 700,

panelHeight:500,

idField: 'value',

textField: 'value',

url:'getTx.do',

method: 'post',

fit: false,

fitColumns: false,

required: true,

editable:false,

columns: [[

{field:'value',title:'value'},

{field:'note',title:'note',align:'left'}

]],

onLoadSuccess:function(){ //修改页加载表格数据

$('#tx').combogrid('setValue', '${dto.tx}');

},

onClickRow:function(index,row){

$('#tx').val(row.value); //下拉数据表格的第一层的input框赋值，否则不能作为必填项提交

}

}

});

注意到此处的方法onClickRow:function(index,row)是数据表格的方法，那么easyui-combogrid继承自easyui-datagrid和easyui-combo，它同时也继承了datagrid和combo的方法，所以此处可以直接用。