这篇文章要分享的一直技巧是表单联动，我们采用普适的方法写一个表单联动的函数库，当然和以前一样，我只是完成了其中的一部分，还有很大的扩展空间。有需要的朋友可以自行扩展，主要看气质！
相关html代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>表单联动</title>
</head>
<body>
<h1>表单联动</h1>
<form action="">
请选择城市：
<select name="parent" id="parent">
</select>
<br/>
请选择区县：
<select name="child" id="child">
<option value="">请选择</option>
</select>
</form>
<script src="js/linkage.js"></script>
<script>
var parent = document.getElementById('parent'),
parentData = [
{code: 0, value: '请选择'},
{code: 1, value: '北京'},
{code: 2, value: '上海'},
{code: 3, value: '深圳'}
],
child = document.getElementById('child'),
childData = [
['请选择'],
['海淀区', '朝阳区', '丰台区', '石景山区', '通州区', '顺义区'],
['黄埔区', '浦东区 ', '长宁区', '宝山区 ', '杨浦区', '嘉定区','虹口区'],
['罗湖区', '福田区 ', '南山区', '保安新区 ', '光明新区']
];
linkage(parent, parentData, child, childData);
</script>
</body>
</html>相关js代码如下：
/**
* Created by MAORUIBIN on 2016-04-01.
*/
(function(window) {
var win = window;
var linkage = function(parent, parentData, child, childData) {
_render(parent,parentData);
parent.onchange = function() {
var _value = this.value;
_render(child, childData[_value])
}
}
var _render = function(ele, data) {
var opts = ele.querySelectorAll('option');
for(var i = 0, len = opts.length; i < len; ++i) {
ele.removeChild(opts[i]);
}
var frag = document.createDocumentFragment();
for (var i = 0, len = data.length; i < len; ++i) {
if (typeof data[0] === 'object') {
var opt = new Option(data[i].value, data[i].code);
}else {
var opt = new Option(data[i], i);
}
frag.appendChild(opt);
}
ele.appendChild(frag);
}
win.linkage = linkage;
})(window)
随时随地看视频
热门评论
-
ruibin2017-05-05 0
-
_莫忘初心2017-05-05 0
-
SunshineAgain34168582016-06-06 0
查看全部评论var parent = document.getElementById('parent'), parentData = [ {code: 0, value: '请选择'}, {code: 1, value: '北京'}, {code: 2, value: '上海'}, {code: 3, value: '深圳'} ], child = document.getElementById('child'), childData = [ ['请选择'], ['海淀区', '朝阳区', '丰台区', '石景山区', '通州区', '顺义区'], ['黄埔区', '浦东区 ', '长宁区', '宝山区 ', '杨浦区', '嘉定区','虹口区'], ['罗湖区', '福田区 ', '南山区', '保安新区 ', '光明新区'] ]; linkage(parent, parentData, child, childData);
作者： 外号理论汪
链接：http://www.imooc.com/article/6139
来源：慕课网
敲了一遍，但是敲出来的有毛病~求大神指点
说实话 没看懂啥意思~
这个确实很实用～不错不错～