<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen" />
<link rel="stylesheet" type="text/css" href="stylesheets/pygment_trac.css" media="screen" />
<link rel="stylesheet" type="text/css" href="stylesheets/print.css" media="print" />
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<title>jQuery联动下拉框表单美化 - 网页模板</title>
<link rel="stylesheet" href="src/css/selector.css">
<script src="src/js/jquery.js"></script>
<script src="src/js/Selector.js"></script>
</head>
<body>
<div id="container">
<div class="inner">
<section id="main_content">
<h3>Demo</h3>
<div class="m-form">
<div class="item">
<label>婚姻状况：</label>
<dl class="m-select" id="Marriage">
<dt>未婚</dt>
<dd>
<input type="hidden" name="">
</dd>
</dl>
</div>
<div class="item">
<label>年龄：</label>
<dl class="m-select m-select-w" id="Age0">
<dt></dt>
<dd class="age">
<input type="hidden" name="" value="24">
</dd>
</dl>
<span class="t">至</span>
<dl class="m-select m-select-w" id="Age1">
<dt></dt>
<dd class="age">
<input type="hidden" name="" value="28">
</dd>
</dl>
</div>
<div class="item">
<label>身高：</label>
<dl class="m-select m-select-w" id="Height0">
<dt></dt>
<dd class="height">
<input type="hidden" name="">
</dd>
</dl>
<span class="t">至</span>
<dl class="m-select m-select-w" id="Height1">
<dt></dt>
<dd class="height">
<input type="hidden" name="">
</dd>
</dl>
</div>
<div class="item">
<label>居住地:</label>
<dl class="m-select" id="AreaSelector">
<dt></dt>
<dd class="region" style="height:210px;">
<input type="hidden" name="" value="">
<ul class="tab">
</ul>
<div class="tab-con clearfix">
</div>
</dd>
</dl>
</div>
<div class="item">
<label>出生地:</label>
<dl class="m-select" id="AreaSelector2">
<dt></dt>
<dd class="region" style="height:210px;">
<input type="hidden" name="" value="">
<ul class="tab">
</ul>
<div class="tab-con clearfix">
</div>
</dd>
</dl>
</div>
<div class="item">
<label>月收入:</label>
<dl class="m-select m-select-w" id="Salary0">
<dt></dt>
<dd>
<input type="hidden" name="">
</dd>
</dl>
<span class="t">至</span>
<dl class="m-select m-select-w" id="Salary1">
<dt></dt>
<dd>
<input type="hidden" name="">
</dd>
</dl>
</div>
</div>
<br>
<h3>Code</h3>
<pre>
<code>
//普通模式
new SelectorJS.selector.init({
id:'#Marriage',
data: [["1", "未婚"], ["3", "离异"], ["4", "丧偶"] ],
value:'未婚'
});
//年龄联动
new SelectorJS.age('#Age0','#Age1',25,27);
//身高联动
new SelectorJS.heightMulti('#Height0','#Height1',168,178);
//地区联动 二级
new SelectorJS.area.init('#AreaSelector','101020600', false);
//地区联动 三级
new SelectorJS.area.init('#AreaSelector2','101151202', true);
//自定义联动
var salaryCode = [["1", "1000"], ["2", "2000"], ["3", "3000"], ["4", "5000"], ["5", "8000"], ["6", "10000"], ["7", "20000"], ["8", "50000"], ["9", "50000以上"] ];
var salaryDefault1 = '1';
var salaryDefault2 = '4';
new SelectorJS.selector.init({
id:'#Salary0',
data: salaryCode,
value:salaryDefault1,
click: function(val, index){
new SelectorJS.selector.init({
id:'#Salary1',
data: salaryCode.slice(index),
value: Math.max(salaryCode[index][0], parseInt(salaryDefault2) )
}).select.click();
}
});
new SelectorJS.selector.init({
id:'#Salary1',
data: salaryCode.slice(parseInt(salaryDefault1)),
value: salaryDefault2
});
</code>
</pre>
<h3>说明</h3>
<p>Selector.js与address.json两个文件必须放在同一个目录下。当调用地区的方法的时候才加载adrress文件</p>
</section>
<script>
//普通模式
new SelectorJS.selector.init({
id:'#Marriage',
data: [["1", "未婚"], ["3", "离异"], ["4", "丧偶"] ],
value:'1'
});
//年龄联动
new SelectorJS.age('#Age0','#Age1',25,27);
//身高联动
new SelectorJS.heightMulti('#Height0','#Height1',168,178);
//地区联动 二级
new SelectorJS.area.init('#AreaSelector','101020600', false);
//地区联动 三级
new SelectorJS.area.init('#AreaSelector2','101151202', true);
//自定义联动
var salaryCode = [["1", "1000"], ["2", "2000"], ["3", "3000"], ["4", "5000"], ["5", "8000"], ["6", "10000"], ["7", "20000"], ["8", "50000"], ["9", "50000以上"] ];
var salaryDefault1 = '1';
var salaryDefault2 = '4';
new SelectorJS.selector.init({
id:'#Salary0',
data: salaryCode,
value:salaryDefault1,
click: function(val, index){
new SelectorJS.selector.init({
id:'#Salary1',
data: salaryCode.slice(index),
value: Math.max(salaryCode[index][0], parseInt(salaryDefault2) )
}).select.click();
}
});
new SelectorJS.selector.init({
id:'#Salary1',
data: salaryCode.slice(parseInt(salaryDefault1)),
value: salaryDefault2
});
</script>
</div>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
jQuery联动下拉框表单美化.zip
版权申诉
190 浏览量
2022-11-21
11:32:24
上传
评论
收藏 145KB ZIP 举报
jQuery联动下拉框表单美化.zip （13个子文件） 
jQuery联动下拉框表单美化 
jQuery联动下拉框表单美化.jpg 53KB jiaoben3113 images 
hr.png 1KB body-bg.png 9KB highlight-bg.jpg 33KB
index.html 6KB src css 
selector.css 2KB images selector.png 1KB js jquery.js 91KB address.js 85KB Selector.js 9KB stylesheets print.css 3KB pygment_trac.css 4KB stylesheet.css 8KB资源评论
