jquery selector下拉框联动选择菜单代码



175 698 233



特效描述:下拉框 联动选择菜单,jquery下拉框联动

代码结构

1. 引入CSS

<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" />
<link rel="stylesheet" href="src/css/selector.css" />

2. 引入JS

<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script type="text/javascript" src="src/js/jquery.js"></script>
<script type="text/javascript" src="src/js/Selector.js"></script>

3. HTML代码

<div id="container">
	<div class="inner">
		<header><h1>模拟选择框</h1></header>
		<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>说明</h3>
		<p>Selector.js与address.json两个文件必须放在同一个目录下。当调用地区的方法的时候才加载adrress文件</p>
	</section>
	<script type="text/javascript">
	//普通模式
	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>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 弹出层拖动 窗口提示框 切换按钮 form表单 提示框/弹出层 二级联动 城市选择 表单提交

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到