input使用datalist时,如果datalist中的option有value和label两个属性;
在给input赋值时,有时会需要显示的是label,而传到form中的值为value;
这时可以在需要的input下方建一个隐藏的input,name设为需要传的name值;
将option中的label赋值给显示的input,value赋值给隐藏的input。
页面中方法:
// An highlighted block
$(function () {
//页面加载完加载datalist
var abc =getCompanyAndManufact($,'${base}');
});
$('input[list]').on('input', function(e) {
//监听input的datalist
var $input = $(e.target);
var bb = autoFill($,'${base}',$input);
});
js中方法:
// An highlighted block
function getCompanyAndManufact($,url) {
$.ajax({
type: "POST",
url:url+"/xyManufact/getAllManufact",
dataType: "json",
contentType: "application/json",
success: function (data) {
var manufactList = new Array();
manufactList = data;
for (var i = 0; i < manufactList.length; i++) {
var option = '<option value="' + manufactList[i].manufactCode + '" >'+data[i].manufactName+'</option>';
$("#manufactList").append(option);
}
},error:function () {
layui.layer.msg("加载厂家数据失败");
}
});
$.ajax({
type: "POST",
url:url+"/xyCompany/getAllCompany",
dataType: "json",
contentType: "application/json",
success: function (data) {
var companyTypeList = new Array();
companyTypeList = data;
for (var i = 0; i < companyTypeList.length; i++) {
var option = '<option value="' + data[i].companyCode + '">'+data[i].companyName+'</option>';
$("#companyTypeList").append(option);
}
},error:function () {
layui.layer.msg("加载企业数据失败");
}
});
// $.ajax({
// type: "POST",
// url:url+"/xyCompany/getAllCompany",
// dataType: "json",
// contentType: "application/json",
// success: function (data) {
// for (var i = 0; i < data.length; i++) {
// var option = '<option value="' + data[i].companyCode + '" >' + data[i].companyName + '</option>';
// $("#s_moduleOrganization").append(option);
// }
// form.render('select');
// },error:function () {
// layui.layer.msg("加载企业数据失败");
// }
// });
// $.ajax({
// type: "POST",
// url:url+"/xyManufact/getAllManufact",
// dataType: "json",
// contentType: "application/json",
// success: function (data) {
// for (var i = 0; i < data.length; i++) {
// var option = '<option value="' + data[i].manufactCode + '" >' + data[i].manufactName + '</option>';
// $("#s_manufacturer").append(option);
// }
// form.render('select');
// },error:function () {
// layui.layer.msg("加载生产厂商数据失败");
// }
// });
};
function autoFill($,url,$input) {
if($input[0].id == "s_manufacturer"){
var $options = $('#' + $input.attr('list') + ' option'),
label = $input.val();
for(var i = 0; i < $options.length; i++) {
var $option = $options.eq(i);
if ($option[0].value === label) {
$input.val($option[0].label);
$("input[name='s_manufacturer']").val($option[0].value);
}
}
}
if($input[0].id == "s_moduleOrganization"){
var $options = $('#' + $input.attr('list') + ' option'),
label = $input.val();
for(var i = 0; i < $options.length; i++) {
var $option = $options.eq(i);
if($option[0].value === label) {
$input.val( $option[0].label );
$("input[name='s_moduleOrganization']").val($option[0].value);
//给用户输入框datalist赋值
$("#moduleUserList")[0].length = 1;
$.ajax({
type: "POST",
url:url+"/admin/system/user/getUserByCompanyCode?companyCode="+$option[0].value,
dataType: "json",
contentType: "application/json",
success: function (data) {
for (var i = 0; i < data.length; i++) {
var option = '<option value="' + data[i].loginName + '" >' + data[i].nickName + '</option>';
$("#moduleUserList").append(option);
$("input[name='s_moduleUser']").val("");
}
},error:function () {
layui.layer.msg("加载企业附属用户失败");
}
});
break;
}
}
}
if($input[0].id == "s_moduleUser"){
var $options = $('#' + $input.attr('list') + ' option'),
label = $input.val();
for(var i = 0; i < $options.length; i++) {
var $option = $options.eq(i);
if ($option[0].value === label) {
$input.val($option[0].label);
$("input[name='s_moduleUser']").val($option[0].value);
}
}
}
}