具体功能：
实现品名、材质、规格、产地的四级联动，并且在品名、材质、规格、产地输入字时会显示下拉框,实现模糊检索，当输入'品名'时,隐藏的品名code会自动带出，当把品名删掉一个或者几个字使其不完全时，品名code会自动消失，并且'品名'也会自动消失。其后的'材质' '规格' '产地'是根据 '品名' 取得的值，这样的好处是后面的材质 规格 产地可以根据下拉框进行选择也可以手动输入，而不是品名决定材质 材质决定规格 规格决定产地这种的四级联动。具体业务参照【合同管理】中【合同】中【品种明细】中“新增”按钮的实现过程。
相关功能实现的具体代码如下：【注意代码格式！！！】
<script type="text/javascript">
//保存数据到数据库中
var i = 0;
var obj = null;
//点击‘新增’按钮时 新增加一条空白记录，然后自己输入数据
$(document).ready(function(){
$("#addTable").click(function(){
var tr="<tr><td><input type=\"checkbox\" name=\"check\"/></td>"+ //复选框
//品名
"<td><input type='text' name='item_name' id='item_name"+i+"' value='<%=item_name%>'>"+
"<input type='text' name='item_code' id='item_code"+i+"' value=' '></td>"+
"<td><input type='text' name='material_name' id='material_name"+i+"' >"+ //材质
"<td><input type='text' name='spec' id='spec"+i+"'></td>"+ //规格
"<td><input type='text' name='producer' id='producer"+i+"'></td>"+ //产地
"<td><input type='text' name='item_weight' id='item_weight'></td>"+ //件重
"<td><input type='text' name='quantity' id='quantity'></td>"+ //数量
"<td><input type='text' name='weight' id='weight'></td>"+ //重量
"<td><select id='item_measure' name='item_measure'> "+ //计量方式
//获取下拉框中的 ‘计量方式’ 内容
<% if(list!=null){
for(int i=0;i<list.size();i++){
map = (Map)list.get(i);
String base_type = myFunc.getValue(map.get("base_type")).toString();
if(base_type.equals("8")){
map1 = map;
String base_name = myFunc.getValue(map1.get("base_name")).toString();
%>
"<option value='<%=base_name %>'><%=base_name %></option> "+
<% }
}
} %>
"</select></td>"+ //计量方式
"<td><input type='text' name='price' id='price'></td>"+ //含税单价
"<td><input type='text' name='amount' id='amount'></td>"+ //含税金额 = 重量*含税单价
"<td>17%</td>"+ //税率
"<td><select id='warehouse_name' name='warehouse_name'> "+ //获取下拉框中的‘仓库名称’
[单独在仓库表中，为了便于后期维护 当添加或者删除仓库的时候 只添加数据库即可 不需要改动代码]
<% if(list2!=null){
for(int i=0;i<list2.size();i++){
map2 = (Map)list2.get(i);
String warehouse_code = myFunc.getValue(map2.get("warehouse_code")).toString();
String warehouse_name = myFunc.getValue(map2.get("warehouse_name")).toString();
%>
"<option value='<%=warehouse_name%>'><%=warehouse_name%></option> "+
<%
}
}
%>
"</select></td>"+ //收货仓库 仓库表：t_dict_warehouse
"<td><input type='text' name='other_fee' id='other_fee'></td>"+ //其他费用
"<td><input type='text' name='notes' id='notes'></td>"+ //备注
"<td><a href='#' onclick = 'update()'>修改</a></td>"+ //修改
"</tr>";
$("#table1").append(tr);
//在新增每一行的时候就为每一行添加'自动完成'和'失去焦点'事件
auto_nana("item_name" +i, "item_code"+i, "material_name"+i,"spec"+i,"producer"+i); //绑定自动完成的事件
blur_nana("item_name" +i, "item_code"+i); // 绑定失去焦点的事件
i++;
});
//新增结束
});
// {函数}失去焦点事件(‘品名’失去焦点之后清空)
function blur_nana(obj_name1,obj_code1){
$("#" + obj_name1).blur(function(){
if($("#" + obj_code1).val() == ''){
$("#" + obj_name1).val('');
}else{
if($("#" + obj_name1).val() == ''){
$("#" + obj_code1).val('');
}
}
});
}
//name 和 code必须已知绑定关系(name和code已经存在一对一的关系)
obj_name：品名name文本框的id；
obj_code,：品名code文本框的id；
obj_material：材质文本框的id；obj_spec：规格文本框的id；obj_producer：产地文本框的id
function
auto_nana(obj_name, obj_code, obj_material,obj_spec,obj_producer){
//模糊查询'品名', 自动显示在下拉框中【‘合同录入’—‘品种明细’中的‘品种’】
var width = 167;
$('#' + obj_name).AutoComplete({
'data': '/admin/js/autocomplete/getCorpInfo2.jsp',
'ajaxDataType': 'json',
'ajaxParams': {},
'itemHeight': 20,
'width': width,
'maxHeight': 300,
'beforeLoadDataHandler': function(keyword){ //选中之前进行的操作
$('#' + obj_code).val(''); //赋空值
【材质 规格 产地根据品名的联动 当品名清空时 三个也相应的清空】
$("#" + obj_material).val(''); //当清空"品名"的时候 "材质"也相应的清空
$("#" + obj_spec).val(''); //当清空"品名"的时候 "规格"也相应的清空
$("#" + obj_producer).val(''); //当清空"品名"的时候 "产地"也相应的清空
return true;
},
'afterSelectedHandler': function(data) { //选中之后进行的操作：把查出来的数据存放到文本框中然后显示出来
$('#' + obj_code).val(data.cd); // 输入‘品名’后把品名的code放到文本框中
//品名-材质二级联动
var width = 167;
var item_code = $('#' + obj_code).val(); // 根据品名code文本框的id(obj_code)找到品名code的值
$('#' + obj_material).AutoComplete({
'data': '/admin/js/autocomplete/
getCorpInfo3.jsp',
'ajaxDataType': 'json',
'ajaxParams': {'item_code': item_code}, // 把item_code传到getCorpInfo3.jsp中，以'品名的code'作为条件查出材质，并模糊显示在下拉框中
'itemHeight': 20,
'width': width,
'maxHeight': 300,
'beforeLoadDataHandler': function(keyword){ //选中之前进行的操作
//$("item_code"+i+"").val(''); //赋空值
return true;
},
'afterSelectedHandler': function(data) { //选中之后进行的操作：把查出来的数据存放到文本框中然后显示出来
}
});
//品名-规格二级联动
var width = 167;
var item_code = $('#' + obj_code).val();
$('#' + obj_producer).AutoComplete({
'data': '/admin/js/autocomplete/getCorpInfo5.jsp',
'ajaxDataType': 'json',
'ajaxParams': {'item_code': item_code},
'itemHeight': 20,
'width': width,
'maxHeight': 300,
'beforeLoadDataHandler': function(keyword){ //选中之前进行的操作
//$("item_code"+i+"").val(''); //赋空值
return true;
},
'afterSelectedHandler': function(data) { //选中之后进行的操作：把查出来的数据存放到文本框中然后显示出来
}
});
//品名-产地二级联动
var width = 167;
var item_code = $('#' + obj_code).val();
$('#' + obj_spec).AutoComplete({
'data': '/admin/js/autocomplete/getCorpInfo4.jsp',
'ajaxDataType': 'json',
'ajaxParams': {'item_code': item_code},
'itemHeight': 20,
'width': width,
'maxHeight': 300,
'beforeLoadDataHandler': function(keyword){ //选中之前进行的操作
//$("item_code"+i+"").val(''); //赋空值
return true;
},
'afterSelectedHandler': function(data) { //选中之后进行的操作：把查出来的数据存放到文本框中然后显示出来
}
});
}
});
}
</script>本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
