本文介绍了一个改进的企业黄页2.0版本，新增了Echarts图表展示、号码显示控制、详情收起功能和锚点跳转。同时，详细展示了使用Bootstrap框架的HTML结构，以及一个完整的个人信息表单示例，包括省市联动选择、全选反选功能的实现。
Bootstrap、企业黄页2.0、form表单、全选不选反选
一、Bootstrap
PPT内容
基本模板
参考网站
Bootstrap中文网 http://v3.bootcss.com/css/
30 个惊艳的 Bootstrap 扩展插件 http://www.oschina.net/news/43645/30-amazing-plugins-extend-twitter-bootstrap
HTML中导入Bootstrap
所有 JavaScript 插件都依赖 jQuery，因此jQuery必须在Bootstrap之前引入， "jquery"版本必须 “>= 1.9.0”
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
Bootstrap教程网站
https://www.runoob.com/bootstrap/bootstrap-tutorial.html
二、企业黄页2.0
改进后的企业黄页增加了Echarts图表、更多号码显示及隐藏、详情及收起、锚点跳转等功能。
HTML源文件如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阿里巴巴（中国）网络技术有限公司</title>
<!--css样式-->
<link href="css/companyInfo.css" rel="stylesheet">
<!--导入Echarts图表-->
<script src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
<!--导入jQuery-->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<div class="header-panel">
<div class="name">
<h3 style="width:500px;">阿里巴巴（中国）网络技术有限公司 <button class="certification">√ 我要认证</button></h3>
</div>
<div class="nowfunction">
<a href="#">风险监控</a>
<a href="#">递名片</a>
<a href="#">笔记</a>
<a href="#">对比</a>
<a href="#">关注</a>
</div>
<div class="mainInfo">
<div class="phonenum">
<a>电话：0571-8502****</a>
<a href="#" onclick="showPhonenumClick()" style="margin-left: 10px;color:#128bed;">更多号码</a>
<a href="#" style="color:#128bed;">编辑</a>
</div>
<div class="offWeb">
<a href="https://www.alibabagroup.com/cn/global/home" style="color:black;">官网：https://www.alibabagroup.com/cn/global/h...</a>
<a href="#" style="margin-left: 10px;color:#128bed;">认证</a>
</div>
<div class="editComInfo">
<a href="#" style="color:orange;">编辑企业信息</a>
</div>
<div class="email">
<a>邮箱：***@alibaba-inc.com</a>
</div>
<div class="address">
<a>地址： 浙江省杭州市滨江区网商路699号</a>
<a href="#" style="margin-left: 10px;color:#128bed;">附近企业</a>
</div>
<div class="briefIntro">
<a>简介：阿里巴巴网络技术有限公司（简称：阿里巴巴集团）是以曾担任英语教师的马云为首的18人于1999年在浙江杭州创立，他...</a>
<a href="#" onclick="detailInfoClick()" style="margin-left: 10px;color:#128bed;">详情</a>
</div>
</div>
</div>
<div class="container">
<div class="InfoMeau" id="infomeau">
<div class="InfoOpt" style="background-color: white;">
<a href="#">
<h2 style="color: #128bed;">基本信息</h2>
<span>282</span>
</a>
</div>
<div class="InfoOpt" style="width:200px;">
<a href="#SHinfo">
<h2>股东信息统计分析</h2>
<span>2</span>
</a>
</div>
<div class="InfoOpt">
<a href="#sharehold">
<h2>股东信息</h2>
<span>3</span>
</a>
</div>
</div>
<div class="foundInfo">
<table class="ntable">
<tr>
<td width="20%" class="tb">注册资本</td>
<td width="30%" class="">512233万美元</td>
<td width="20%" class="tb">实缴资本</td>
<td width="30%" class="">59690万美元</td>
</tr>
<tr>
<td class="tb">经营状态</td>
<td class="">存续</td>
<td class="tb" width="18%">成立日期</td>
<td class="">1999-09-09</td>
</tr>
<tr>
<td class="tb">统一社会信用代码</td>
<td class="">91330100716105852F</td>
<td class="tb">纳税人识别号</td>
<td class="">91330100716105852F</td>
</tr>
<tr>
<td class="tb">注册号</td>
<td class="">330100400015575</td>
<td class="tb" width="15%">组织机构代码</td>
<td class="">71610585-2</td>
</tr>
<tr>
<td class="tb">企业类型</td>
<td class="">有限责任公司(台港澳与境内合资)</td>
<td class="tb">所属行业</td>
<td class="">信息传输、软件和信息技术服务业</td>
</tr>
<tr>
<td class="tb">核准日期</td>
<td class="" style="max-width:301px;">2019-04-08</td>
<td class="tb">登记机关</td>
<td class="">杭州市高新区（滨江）市场监督管理局</td>
</tr>
<tr>
<td class="tb">所属地区</td>
<td class="" style="max-width:301px;">浙江省</td>
<td class="tb">英文名</td>
<td class="">Alibaba (China) Technology Co., Ltd.</td>
</tr>
<tr>
<td class="tb">曾用名</td>
<td class="">
<span>阿里巴巴（杭州）网络技术发展有限公司 </span>
<span>阿里巴巴(中国)网络有限公司 </span>
</td>
<td class="tb">参保人数</td>
<td class="">759</td>
</tr>
<tr>
<td class="tb">人员规模</td>
<td class="">1000人以上</td>
<td class="tb">营业期限</td>
<td class="">1999-09-09 至 2040-09-08</td>
</tr>
<tr>
<td class="tb">企业地址</td>
<td class="" colspan="3">
浙江省杭州市滨江区网商路699号
<a href="#" class="m-l text-primary" style="text-decoration:none;color:blue;"> 查看地图</a>
<a data-toggle="modal" data-target="#loginModal" href="#" class="m-l text-primary" style="text-decoration:none;color:blue;"> 附近企业</a>
</td>
</tr>
<tr>
<td class="tb">经营范围</td>
<td class="" colspan="3">
开发、销售计算机网络应用软件;设计、制作、加工计算机网络产品并提供相关技术服务和咨询服务;服务:自有物业租赁,翻译,成年人的非证书劳动职业技能培训(涉及许可证的除外)。(依法须经批准的项目,经相关部门批准后方可开展经营活动)
</td>
</tr>
</table>
</div>
<div class="shareholderInformation">
<div class="SHInfo" id="SHinfo">
<h3>股东信息统计分析</h3>
<a href="#SHinfo" id="pack_up"><span onclick="PackupClick()">↑收起</span></a>
</div>
<div class="SHdetail">
<div class="SHradius">
<a style="position: relative;top:10px;left: 10px;">股东持股比例（%）</a>
<div id="SHradiusPie" style="width:500px;height:400px;border:none;"></div>
</div>
<div class="SHradius">
<a style="position: relative;top:10px;left: 10px;">股东认缴出资额（万美元）</a>
<div id="SHradiusBar" style="width:500px;height:400px;border:none;margin-left:50px;"></div>
</div>
</div>
</div>
<div class="shareholder" id="sharehold">
<h3>股东信息 <a style="color:#128bed;">3</a></h3>
<span style="position: relative;top: -39px;left: 105px;">（查看更多1条 <span style="color:orange;">历史股东</span>）</span>
</div>
</div>
<script src="js/nowEcharts.js" type="text/javascript"></script>
<script src="js/nowFunction.js" type="text/javascript"></script>
</body>
</html>
css文件companyInfo.css代码如下：
.certification{
background-color: orange;
width:80px;
height: 22px;
color:white;
font-size:12px;
text-align: center;
text-decoration: none;
display: inline-block;
border:none;
}
.name{
width:600px;
height:23px;
margin-left:100px;
}
.nowfunction{
width:283px;
height:23px;
margin-top: -20px;
margin-left: 893px;
}
.nowfunction a{
float:left;
color:blue;
margin-right:15px;
text-decoration:none;
}
.mainInfo{
width:1075px;
height:100px;
margin-left: 100px;
margin-top:20px;
background-color:#F2F9FC;
}
.mainInfo a{
text-decoration:none;
}
.mainInfo div{
margin-top:10px;
}
.phonenum{
width: 300px;
float: left;
margin-left: 10px;
}
.offWeb{
width: 400px;
float: left;
margin-left: 100px;
}
.editComInfo{
width: 100px;
float: left;
margin-left: 160px;
}
.email{
width: 300px;
float: left;
margin-left: 10px;
}
.address{
width: 585px;
float: left;
margin-left: 100px;
}
.briefIntro{
width: 1000px;
float:left;
margin-left: 10px;
}
.InfoMeau{
width: 1070px;
height:44px;
margin-left: 100px;
margin-top:50px;
}
.InfoOpt{
width:150px;
float:left;
text-align: center;
border: 0.5px solid #eee;
background-color: #eeeeee;
}
.InfoOpt a{
text-decoration:none;
}
.InfoOpt h2{
font-size:16px;
color: #000;
display: inline-block;
}
.InfoOpt span{
font-size: 12px;
color: #999;
font-weight: normal;
}
.foundInfo{
width:1070px;
margin-left: 100px;
}
.ntable{
width: 100%;
margin: 0 auto;
margin-bottom: 20px;
}
.ntable td{
padding: 10px 10px 11px 10px;
border: #E4EEF6 1px solid;
word-break: break-all;
font-size: 14px;
line-height: 1.6;
color: #222;
word-wrap: break-word;
}
.ntable .tb{
background: #F2F9FC;
}
.SHInfo{
width:1070px;
margin-left:100px;
margin-top:50px;
}
.SHInfo a{
text-decoration:none;
position: relative;
top: -40px;
left: 1030px;
}
.SHInfo span{
font-size: 14px;
color: #999;
font-weight: normal;
}
.SHdetail{
width:1070px;
height: 600px;
margin-left: 100px;
}
.SHradius{
width: 500px;
height: 500px;
border:1px solid #eeeeee;
float:left;
margin-left: 20px;
}
.shareholder{
width:1070px;
margin-left: 100px;
}
.shareholder span{
font-size: 14px;
color: #999;
font-weight: normal;
}
js文件代码如下：
1.nowEcharts.js
//获取要显示的位置
var firstChart = echarts.init(document.getElementById('SHradiusPie'));
//编辑Echarts图表
var optionPie = {
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
series : [
{
name: '股东持股比例',
type: 'pie',
radius : '35%',
center: ['45%', '50%'],
data:[
{value:5066, name:'淘宝（中国）软件有限公司'},
{value:3540, name:'浙江天猫技术有限公司'},
{value:1394, name:'Alibaba'},
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
//显示
firstChart.setOption(optionPie);
var secondChart = echarts.init(document.getElementById('SHradiusBar'));
var optionBar = {
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} "
},
xAxis: {
type: 'value',
show:false
},
yAxis: {
//show:false,
type: 'category',
data: ['Alibaba', '浙江天猫技术有限公司', '淘宝（中国）软件有限公司'],
axisLabel:{//坐标轴刻度标签的相关设置。
formatter : function(params){
var newParamsName = "";// 最终拼接成的字符串
var paramsNameNumber = params.length;// 实际标签的个数
var provideNumber = 3;// 每行能显示的字的个数
var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
/**
* 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
*/
// 条件等同于rowNumber>1
if (paramsNameNumber > provideNumber) {
/** 循环每一行,p表示行 */
for (var p = 0; p < rowNumber; p++) {
var tempStr = "";// 表示每一次截取的字符串
var start = p * provideNumber;// 开始截取的位置
var end = start + provideNumber;// 结束截取的位置
// 此处特殊处理最后一行的索引值
if (p == rowNumber - 1) {
// 最后一次不换行
tempStr = params.substring(start, paramsNameNumber);
} else {
// 每一次拼接字符串并换行
tempStr = params.substring(start, end) + "\n";
}
newParamsName += tempStr;// 最终拼成的字符串
}
} else {
// 将旧标签的值赋给新标签
newParamsName = params;
}
//将最终的字符串返回
return newParamsName
}
}
},
series: [{
name:'股东认缴出资额',
data: [71412, 181347, 259474],
type: 'bar',
barWidth:40,
label:{
show:true,
position:'right',
color:'black'
}
}]
};
secondChart.setOption(optionBar);
2.nowFunction.js
function PackupClick(){
$(function () {
$(".SHdetail").hide();
$(".SHdetail").css("height","0px");
$("#pack_up").html('<span οnclick="UnfoldClick()">↓展开</span>');
})
}
function UnfoldClick() {
$(function () {
$(".SHdetail").css("height","600px");
$(".SHdetail").show();
$("#pack_up").html('<span οnclick="PackupClick()">↑收起</span>');
})
}
function detailInfoClick(){
var element='<a>简介：阿里巴巴网络技术有限公司（简称：阿里巴巴集团）是以曾担任英语教师的马云为首的18人于1999年在浙江杭州创立，他们相信互联网能够创造公平的竞争环境，让小企业通过创新与科技扩展业务，并在参与国内或全球市场竞争时处于更有利的位置。阿里巴巴集团经营多项业务，另外也从关联公司的业务和服务中取得经营商业生态系统上的支援。业务和关联公司的业务包括：淘宝网、天猫、聚划算、全球速卖通、阿里巴巴国际交易市场、1688、阿里妈妈、阿里云、蚂蚁金服、菜鸟网络等。</a>'
+'<a href="#" οnclick="detailUnfoldClick()" style="margin-left: 10px;color:#128bed;">收起</a>'
$(function () {
$(".mainInfo").css("height","150px");
$(".briefIntro").html(element);
})
}
function detailUnfoldClick(){
var element='<a>简介：阿里巴巴网络技术有限公司（简称：阿里巴巴集团）是以曾担任英语教师的马云为首的18人于1999年在浙江杭州创立，他...</a>'
+'<a href="#" οnclick="detailInfoClick()" style="margin-left: 10px;color:#128bed;">详情</a>'
$(function () {
$(".mainInfo").css("height","100px");
$(".briefIntro").html(element);
})
}
function showPhonenumClick(){
var pn_element='<a>电话：0571-85028888</a>'
+'<a href="#" οnclick="hidePhonenumClick()" style="margin-left: 15px;color:#128bed;">隐藏号码</a>'
+'<a href="#" style="color:#128bed;margin-left: 5px;">编辑</a>'
$(function () {
$(".phonenum").html(pn_element);
})
}
function hidePhonenumClick() {
var pn_element='<a>电话：0571-8502****</a>'
+'<a href="#" οnclick="showPhonenumClick()" style="margin-left: 15px;color:#128bed;">更多号码</a>'
+'<a href="#" style="color:#128bed;margin-left: 5px;">编辑</a>'
$(function () {
$(".phonenum").html(pn_element);
})
}
三、form表单
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<script src="./jquery/jquery.min.js"></script>
<meta charset="UTF-8">
<title>个人信息</title>
<style type="text/css">
html{
text-align: center;
}
.selfInfo{
margin-top:150px;
}
.selfInfo input{
vertical-align:middle;
}
.selfInfo textarea{
vertical-align: top;
}
</style>
</head>
<body>
<div id="box" class="selfInfo">
<form class="layui-form">
<p>
<label>姓名：</label>
<input type="text" required="required" id="txtname"/>
</p>
<p style="margin-left: -65px">
<label>性别：</label>
<label><input type="radio" name="sex" value="男" checked>男</label>
<label><input type="radio" name="sex" value="女">女</label>
</p>
<p>
<label>爱好：</label>
<input class="layui-input-inline"type="text" required="required" id="txthobby"/>
</p>
<p style="margin-left:148px;">
<label>城市：</label>
<!--省份选项列表-->
<select class="provinceTarget inputEle selectTag" id="province" style="width:143px;height:22px;">
<option data-index="-1" value="省份">省份</option>
</select>
<!--城市选项列表-->
<select class="cityTarget inputEle selectTag" id="city" style="width:143px;height:22px;">
<option data-index="-1" value="城市">城市</option>
</select>
</p>
<p style="margin-left:-31px;">
<label>联系电话：</label>
<input type="tel" required="required" id="txtphone"/>
</p>
<p style="margin-left:-31px;">
<label>联系邮箱：</label>
<input type="email" required="required" id="txtemail"/>
</p>
<p style="margin-left: 40px;">
<label>备注：</label>
<textarea type="text" id="txtnote"></textarea>
</p>
<div>
<p>
<input class="btn btn-success" type="submit" value="提交" />
<input type="button" value="取消" />
</p>
</div>
</form>
</div>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
/*json数据*/
var jsonList=[
{"provice":"北京市","city":["东城区", "西城区", "朝阳区", "丰台区", "石景山区", "海淀区", "门头沟区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "怀柔区", "平谷区", "密云区", "延庆区"]},
{"provice":"天津市","city":["和平区", "河东区", "河西区", "南开区", "河北区", "红桥区", "东丽区", "西青区", "津南区", "北辰区", "武清区", "宝坻区", "滨海新区", "宁河区", "静海区", "蓟州区"]},
{"provice":"河北省","city":["石家庄市", "唐山市", "秦皇岛市", "邯郸市", "邢台市", "保定市", "张家口市", "承德市", "沧州市", "廊坊市", "衡水市"]},
{"provice":"山西省","city":["太原市", "大同市", "阳泉市", "长治市", "晋城市", "朔州市", "晋中市", "运城市", "忻州市", "临汾市", "吕梁市"]},
{"provice":"内蒙古自治区","city":["呼和浩特市", "包头市", "乌海市", "赤峰市", "通辽市", "鄂尔多斯市", "呼伦贝尔市", "巴彦淖尔市", "乌兰察布市", "兴安盟", "锡林郭勒盟", "阿拉善盟"]},
{"provice":"辽宁省","city":["沈阳市", "大连市", "鞍山市", "抚顺市", "本溪市", "丹东市", "锦州市", "营口市", "阜新市", "辽阳市", "盘锦市", "铁岭市", "朝阳市", "葫芦岛市"]},
{"provice":"吉林省","city":["长春市", "吉林市", "四平市", "辽源市", "通化市", "白山市", "松原市", "白城市", "延边朝鲜族自治州"]},
{"provice":"黑龙江省","city":["哈尔滨市", "齐齐哈尔市", "鸡西市", "鹤岗市", "双鸭山市", "大庆市", "伊春市", "佳木斯市", "七台河市", "牡丹江市", "黑河市", "绥化市", "大兴安岭地区"]},
{"provice":"上海市","city":["黄浦区", "徐汇区", "长宁区", "静安区", "普陀区", "虹口区", "杨浦区", "闵行区", "宝山区", "嘉定区", "浦东新区", "金山区", "松江区", "青浦区", "奉贤区", "崇明区"]},
{"provice":"江苏省","city":["南京市", "无锡市", "徐州市", "常州市", "苏州市", "南通市", "连云港市", "淮安市", "盐城市", "扬州市", "镇江市", "泰州市", "宿迁市"]},
{"provice":"浙江省","city":["杭州市", "宁波市", "温州市", "嘉兴市", "湖州市", "绍兴市", "金华市", "衢州市", "舟山市", "台州市", "丽水市"]},
{"provice":"安徽省","city":["合肥市", "芜湖市", "蚌埠市", "淮南市", "马鞍山市", "淮北市", "铜陵市", "安庆市", "黄山市", "滁州市", "阜阳市", "宿州市", "六安市", "亳州市", "池州市", "宣城市"]},
{"provice":"福建省","city":["福州市", "厦门市", "莆田市", "三明市", "泉州市", "漳州市", "南平市", "龙岩市", "宁德市"]},
{"provice":"江西省","city":["南昌市", "景德镇市", "萍乡市", "九江市", "新余市", "鹰潭市", "赣州市", "吉安市", "宜春市", "抚州市", "上饶市"]},
{"provice":"山东省","city":["济南市", "青岛市", "淄博市", "枣庄市", "东营市", "烟台市", "潍坊市", "济宁市", "泰安市", "威海市", "日照市", "莱芜市", "临沂市", "德州市", "聊城市", "滨州市", "菏泽市"]},
{"provice":"河南省","city":["郑州市", "开封市", "洛阳市", "平顶山市", "安阳市", "鹤壁市", "新乡市", "焦作市", "濮阳市", "许昌市", "漯河市", "三门峡市", "南阳市", "商丘市", "信阳市", "周口市", "驻马店市", "济源市"]},
{"provice":"湖北省","city":["武汉市", "黄石市", "十堰市", "宜昌市", "襄阳市", "鄂州市", "荆门市", "孝感市", "荆州市", "黄冈市", "咸宁市", "随州市", "恩施土家族苗族自治州", "仙桃市", "潜江市", "天门市", "神农架林区"]},
{"provice":"湖南省","city":["长沙市", "株洲市", "湘潭市", "衡阳市", "邵阳市", "岳阳市", "常德市", "张家界市", "益阳市", "郴州市", "永州市", "怀化市", "娄底市", "湘西土家族苗族自治州"]},
{"provice":"广东省","city":["广州市", "韶关市", "深圳市", "珠海市", "汕头市", "佛山市", "江门市", "湛江市", "茂名市", "肇庆市", "惠州市", "梅州市", "汕尾市", "河源市", "阳江市", "清远市", "东莞市", "中山市", "潮州市", "揭阳市", "云浮市"]},
{"provice":"广西壮族自治区","city":["南宁市", "柳州市", "桂林市", "梧州市", "北海市", "防城港市", "钦州市", "贵港市", "玉林市", "百色市", "贺州市", "河池市", "来宾市", "崇左市"]},
{"provice":"海南省","city":["海口市", "三亚市", "三沙市", "儋州市", "五指山市", "琼海市", "文昌市", "万宁市", "东方市", "定安县", "屯昌县", "澄迈县", "临高县", "白沙黎族自治县", "昌江黎族自治县", "乐东黎族自治县", "陵水黎族自治县", "保亭黎族苗族自治县", "琼中黎族苗族自治县"]},
{"provice":"重庆市","city":["万州区", "涪陵区", "渝中区", "大渡口区", "江北区", "沙坪坝区", "九龙坡区", "南岸区", "北碚区", "綦江区", "大足区", "渝北区", "巴南区", "黔江区", "长寿区", "江津区", "合川区", "永川区", "南川区", "璧山区", "铜梁区", "潼南区", "荣昌区", "开州区", "梁平区", "武隆区", "城口县", "丰都县", "垫江县", "忠县", "云阳县", "奉节县", "巫山县", "巫溪县", "石柱土家族自治县", "秀山土家族苗族自治县", "酉阳土家族苗族自治县", "彭水苗族土家族自治县"]},
{"provice":"四川省","city":["成都市", "自贡市", "攀枝花市", "泸州市", "德阳市", "绵阳市", "广元市", "遂宁市", "内江市", "乐山市", "南充市", "眉山市", "宜宾市", "广安市", "达州市", "雅安市", "巴中市", "资阳市", "阿坝藏族羌族自治州", "甘孜藏族自治州", "凉山彝族自治州"]},
{"provice":"贵州省","city":["贵阳市", "六盘水市", "遵义市", "安顺市", "毕节市", "铜仁市", "黔西南布依族苗族自治州", "黔东南苗族侗族自治州", "黔南布依族苗族自治州"]},
{"provice":"云南省","city":["昆明市", "曲靖市", "玉溪市", "保山市", "昭通市", "丽江市", "普洱市", "临沧市", "楚雄彝族自治州", "红河哈尼族彝族自治州", "文山壮族苗族自治州", "西双版纳傣族自治州", "大理白族自治州", "德宏傣族景颇族自治州", "怒江傈僳族自治州", "迪庆藏族自治州"]},
{"provice":"西藏自治区","city":["拉萨市", "日喀则市", "昌都市", "林芝市", "山南市", "那曲市", "阿里地区"]},
{"provice":"陕西省","city":["西安市", "铜川市", "宝鸡市", "咸阳市", "渭南市", "延安市", "汉中市", "榆林市", "安康市", "商洛市"]},
{"provice":"甘肃省","city":["兰州市", "嘉峪关市", "金昌市", "白银市", "天水市", "武威市", "张掖市", "平凉市", "酒泉市", "庆阳市", "定西市", "陇南市", "临夏回族自治州", "甘南藏族自治州"]},
{"provice":"青海省","city":["西宁市", "海东市", "海北藏族自治州", "黄南藏族自治州", "海南藏族自治州", "果洛藏族自治州", "玉树藏族自治州", "海西蒙古族藏族自治州"]},
{"provice":"宁夏回族自治区","city":["银川市", "石嘴山市", "吴忠市", "固原市", "中卫市"]},
{"provice":"新疆维吾尔自治区","city":["乌鲁木齐市", "克拉玛依市", "吐鲁番市", "哈密市", "昌吉回族自治州", "博尔塔拉蒙古自治州", "巴音郭楞蒙古自治州", "阿克苏地区", "克孜勒苏柯尔克孜自治州", "喀什地区", "和田地区", "伊犁哈萨克自治州", "塔城地区", "阿勒泰地区", "石河子市", "阿拉尔市", "图木舒克市", "五家渠市", "铁门关市"]},
{"provice":"香港","city":["香港"]},
{"provice":"澳门","city":["澳门"]}];
/* 资料添加*/
var provice="";
var city="";
function loadCityData(){
for(var i=0;i<jsonList.length;i++){
provice="<option data-index="+i+" value='"+jsonList[i].provice+"'>"+jsonList[i].provice+"</option>";
$(".provinceTarget").append(provice);
}
/*for(var j=0;j<jsonList[0].city.length;j++){
city="<option data-index="+j+" value="+jsonList[0].city[j]+">"+jsonList[0].city[j]+"</option>";
$(".cityTarget").append(city);
}*/
}
$(function(){
window.onload = function() {
loadCityData();
}
$(".provinceTarget").change(function(){
$(".cityTarget").empty();
var opt=$(".provinceTarget option:selected").attr("data-index");
// console.log(opt);
if(opt == "-1"){
city="<option data-index='-1' value='城市'>城市</option>";
$(".cityTarget").append(city);
}else{
var length=jsonList[opt].city.length;
for(var j=0;j<length;j++){
city="<option data-index="+j+" value="+jsonList[opt].city[j]+">"+jsonList[opt].city[j]+"</option>";
$(".cityTarget").append(city);
}
}
});
})
//更新省份和城市
function updateLocationInfo(proviceName,cityName){
var pIndex = -1;
for(var i=0;i<jsonList.length;i++){
if(jsonList[i].provice.indexOf(proviceName) != -1){
pIndex = i;
$(".provinceTarget").empty();
for(var j=0;j<jsonList.length;j++){
provice="<option data-index="+j+" value='"+jsonList[j].provice+"'>"+jsonList[j].provice+"</option>";
if(j == pIndex){
provice="<option data-index="+j+" selected value='"+jsonList[j].provice+"'>"+jsonList[j].provice+"</option>";
}
$(".provinceTarget").append(provice);
}
$(".cityTarget").empty();
var cLen=jsonList[pIndex].city.length;
for(var w=0;w<cLen;w++){
city="<option data-index="+w+" value="+jsonList[pIndex].city[w]+">"+jsonList[pIndex].city[w]+"</option>";
if(jsonList[pIndex].city[w] == cityName){
city="<option data-index="+w+" selected value="+jsonList[pIndex].city[w]+">"+jsonList[pIndex].city[w]+"</option>";
}
$(".cityTarget").append(city);
}
break;
}
}
}
</script>
</body>
</html>
结果如下：
四、全选、不选、反选 复选框实现
HTML代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function(){
// 获取所有的按钮
var btns = document.getElementsByTagName("button");
// 获取所有的选项input
var inputs = document.getElementsByTagName("input");
// 全选或者不选的时候 调用此函数
function fun(flag){
for (var i=0; i<inputs.length;i++) {
inputs[i].checked = flag;
}
}
//获取第一个按钮 “全选”
btns[0].onclick = function(){
fun(true);
}
// 获取第二个按钮 "不选"
btns[1].onclick = function(){
fun(false);
}
// 获取第三个按钮 “反选”
btns[2].onclick = function(){
// 遍历所有的选项，判断每一个选项是否被选中
for (var i=0;i<inputs.length;i++) {
inputs[i].checked == true ? inputs[i].checked = false : inputs[i].checked = true;
}
}
}
</script>
</head>
<body>
<div id="box1">
<button>全选</button>
<button>不选</button>
<button>反选</button>
</div>
<div id="box2">
<ul>
<li>选项1：<input type="checkbox"></li>
<li>选项2：<input type="checkbox"></li>
<li>选项3：<input type="checkbox"></li>
<li>选项4：<input type="checkbox"></li>
<li>选项5：<input type="checkbox"></li>
<li>选项6：<input type="checkbox"></li>
<li>选项7：<input type="checkbox"></li>
<li>选项8：<input type="checkbox"></li>
<li>选项9：<input type="checkbox"></li>
</ul>
</div>
</body>
</html>
相关资料下载
企业黄页：https://download.youkuaiyun.com/download/pyhkobe/11390094
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
