四级联动(品名、材质、规格、产地)和自动完成的功能

具体功能：

实现品名、材质、规格、产地的四级联动，并且在品名、材质、规格、产地输入字时会显示下拉框,实现模糊检索，当输入'品名'时,隐藏的品名code会自动带出，当把品名删掉一个或者几个字使其不完全时，品名code会自动消失，并且'品名'也会自动消失。其后的'材质' '规格' '产地'是根据 '品名' 取得的值，这样的好处是后面的材质规格产地可以根据下拉框进行选择也可以手动输入，而不是品名决定材质材质决定规格规格决定产地这种的四级联动。具体业务参照【合同管理】中【合同】中【品种明细】中“新增”按钮的实现过程。

相关功能实现的具体代码如下：【注意代码格式！！！】

//获取下拉框中的‘仓库名称’

[单独在仓库表中，为了便于后期维护当添加或者删除仓库的时候只添加数据库即可不需要改动代码]

<% 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>

四级联动(品名、材质、规格、产地)和自动完成的功能相关推荐

通用四级联动下拉列表
Author: shaoyun Email: shaoyun (at) yeah.net Date: 2010-09-03 Blog: http://shaoyun.cnblogs.com/ 前面的文 ...
html中免费的四级联动,利用JS实现省市区街道四级联动插件
特效描述:利用JS实现省市区街道四级联动插件.利用JS实现省市区街道四级联动插件代码结构 1. 引入CSS 2. 引入JS 3. HTML代码所在地区所在地区请选择请选择请选择请选择 ...
php用ajax方式实现四级联动
使用ajax方式实现了下简单的四级联动, 数据库: 以下为前台代码: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <titl ...
laravel在线教育开发__四级联动（地区选择）
在线教育开发之四级联动为了实现地区的四级联动选择,可以使用ajax提交数据到控制器,控制器接收数据之后查询pid对应的area. 1.生成地区数据表,需要四级联动表源码请添+Q1143157804( ...
weui 自定义datepicker 年月日上午下午四级联动的实现
由于项目需求,需要自定制年月日上午这种四级联动,经过模仿官方weui.min.js实现了上述功能. 根据此种样式可以灵活实现月日两级联动或年月日时分秒六级联动功能.代码如下: <link r ...
小程序开发--地区选择四级联动（选择省,市,县,镇）
前端时间接到一个项目,里面有涉及到地区选择四级联动(即能选择到镇).自己去网上收罗了一波,也没发现有很详细的,所以就自己来写,写完总结一下. 首先地址选择小程序有自带一个组件,我们就先来看看这个组件: ...
android三级联动、四级联动（地区选择）
GitHub地址:https://github.com/gamekonglee/RegionSelector 先上效果图: allprojects { repositories { .. maven ...
vue 四级联动地址联动 vue级联选择
vue 四级联动效果实现前提首先看下,我们的开发环境及数据封装特点: 第一: 开发框架vue-cli3 elementUI 第二: 数据封装情况,详见代码部分 data中的 data; 满足以上2 ...
vue省市区镇四级联动
vue省市区镇四级联动参考文档https://terryz.gitee.io/vue/#/region/demo 使用npm把插件安装到项目中 npm i -S v-region 在项目入口main ...

四级联动(品名、材质、规格、产地)和自动完成的功能

四级联动(品名、材质、规格、产地)和自动完成的功能相关推荐

最新文章

热门文章