完整的省市区三级联动菜单取值问题

提问 未结 14 2098
流年哦
流年哦 2018-4-3
悬赏:20飞吻
版本:Fly社区模板 浏览器:
详情请参考夜莺大大在
http://fly.layui.com/jie/8647/
发表的文章
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>基于 Layui form 组件的省市区联动选择的实现</title>
<link rel="stylesheet" href="js/layui/css/layui.css" />
<script type="text/javascript" src="js/layui/layui.js"></script>
<script type="text/javascript" src="js/data.js"></script>
<script type="text/javascript" src="js/province.js"></script>
<script type="text/javascript">
var defaults = {
s1:'provid',
s2:'cityid',
s3:'areaid',
v1:null,
v2:null,
v3:null
};
</script>
</head>
<body>
<div style="width:900px;margin:50px auto;">
<form class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">选择地区</label>
<div class="layui-input-inline">
<select name="provid" id="provid" lay-filter="provid" >
<option value="">请选择省</option>
</select>
</div>
<div class="layui-input-inline">
<select name="cityid" id="cityid" lay-filter="cityid">
<option value="">请选择市</option>
</select>
</div>
<div class="layui-input-inline">
<select name="areaid" id="areaid" lay-filter="areaid">
<option value="">请选择县/区</option>
</select>
</div>
</div>
</form>
</div>
</body>
</html>
以下是province.js的代码:
var defaults = {
s1:'provid',
s2:'cityid',
s3:'areaid',
v1:null,
v2:null,
v3:null
};
var $form;
var form;
var $;
layui.define(['jquery', 'form'], function() {
$ = layui.jquery;
form = layui.form();
$form = $('form');
treeSelect(defaults);
});
function treeSelect(config)
{
config.v1 =config.v1?config.v1:110000;
config.v2 =config.v2?config.v2:110100;
config.v3 =config.v3?config.v3:110101;
$.each(threeSelectData,function(k,v){
appendOptionTo($form.find('select[name='+config.s1+']'),k,v.val,config.v1);
});
form.render();
cityEvent(config);
areaEvent(config);
form.on('select('+config.s1+')', function(data) {
cityEvent(data);
form.on('select('+config.s2+')', function(data) {
areaEvent(data);
});
});

function cityEvent(data){
$form.find('select[name='+config.s2+']').html("");
config.v1 = data.value?data.value:config.v1;
$.each(threeSelectData,function(k,v){
if(v.val==config.v1)
{
if(v.items){
$.each(v.items,function(kt,vt){
appendOptionTo($form.find('select[name='+config.s2+']'),kt,vt.val,config.v2);
});
}
}
});
form.render();
config.v2 = $('select[name='+config.s2+']').val();
areaEvent(config);
}
function areaEvent(data){
$form.find('select[name='+config.s3+']').html("");
config.v2 = data.value?data.value:config.v2;
$.each(threeSelectData,function(k,v){
if(v.val==config.v1)
{
if(v.items){
$.each(v.items,function(kt,vt){
if(vt.val==config.v2)
{
$.each(vt.items,function(ka,va){
appendOptionTo($form.find('select[name='+config.s3+']'),ka,va,config.v3);
});
}
});
}
}
});
form.render();
form.on('select('+config.s3+')', function(data) {});
}
function appendOptionTo($o,k,v,d){
var $opt=$("<option>").text(k).val(v);
if(v==d){$opt.attr("selected", "selected")}
$opt.appendTo($o);
}
}
模板中defaults变量可以自定义元素的名称和设置默认选中的值
data.js数据下载地址: http://pan.baidu.com/s/1kVI78HL

辣么问题来了:
我要实现下拉框取值为省份名、城市名、区域名。怎么改province写法呢? 我试了很久 console.log 打印出来的都是id。求助各位大大。本人前端菜鸟,还请谅解!
回帖
  • 流年哦
    2018-4-8
    感谢大家的回答,现在已经解决了只需要在data.js文件里改下就可以了!
    1 回复
  • AggerChen
    2018-4-4
    自我实现 给与参考
    http://fly.layui.com/jie/22071/
    0 回复
  • layui 下拉框监听事件会返回data.othis,这个可以拿到美化后的下拉框选中的值。:
    layui.form.on('select(下拉框的标识)', function(data){
    console.log(data.othis.find(".layui-unselect").val());//这个就是选中的下拉框的值,你选中北京市,值就是北京市。
    layui.form.render('select');
    });
    0 回复
  • 流年哦
    2018-4-4
    @AggerChen 好的。正在参考,谢谢了
    0 回复
  • 流年哦
    2018-4-4
    @找不到北1018 我以前是这样写的 我给他的是内容改变事件,然后捕捉到他改变后的值,但是这样写不行的。等到执行完成后它还是id。不是我所需要的地区名
    0 回复
  • @流年哦 通过过滤器,拿到你选择的下拉框的值就可以了,你要下拉框显示的内容做什么。好像不需要吧。
    0 回复
  • 流年哦
    2018-4-4
    @踏雪无痕470 我现在取到值后是这个样子的。是他的id.而不是咱们所说的地名。而我要的数据是咱们的地名
    0 回复
  • @流年哦 这个问题,建议你传给表格的json数据中就已经转换成地名了。这个可以通过后端实现。
    0 回复
  • 流年哦
    2018-4-4
    @踏雪无痕470 这个获取到的值从前台传到后台,后台debug取到的值就是id。不知道怎么换成地名。如果一个个的id给他判断然后在转成地名的话这样太麻烦了吧[泪]
    0 回复
  • @流年哦
    form.on('select(blockTypeTemp)', function(data){
    categoryName = data.elem[data.elem.selectedIndex].text;
    });
    0 回复