jquery联动下拉框插件chained使用方法

项目中需要用到三级联动下拉框，所以给在网上查了一下。

用到了 jquery.chained.js （官方下载链接）

 

使用这个插件需要引用jquery文件，亲测版本过高会报错，可能是里面有些东西已经废掉了吧

demo里面用的是jquery-1.8.2.js

 

 

<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/jquery.chained.js"></script>

 

 

然后，写几个select标签。select写法需要注意。

 

 

<select id="mark" name="mark">
		<option value="">--</option>
		<option value="bmw">BMW</option>
		<option value="audi">Audi</option>
	</select>
	<select id="series" name="series">
		<option value="">--</option>
		<option value="series-3" class="bmw">3 series</option>
		<option value="series-5" class="bmw">5 series</option>
		<option value="series-6" class="bmw">6 series</option>
		<option value="a3" class="audi">A3</option>
		<option value="a4" class="audi">A4</option>
		<option value="a5" class="audi">A5</option>
	</select>
	<select id="model" name="model">
		<option value="">--</option>
		<option value="coupe" class="series-3 series-6 a5">Coupe</option>
		<option value="cabrio" class="series-3 series-6 a3 a5">Cabrio</option>
		<option value="sedan" class="series-3 series-5 a3 a4">Sedan</option>
		<option value="sportback" class="a3 a5">Sportback</option>
	</select>

 

 

//value 相当于本选项的 id ,class 相当于父选项的id（空格隔开，表示属于多个父选项）

 

然后加入js ，关联这三个下拉框

 

<script type="text/javascript">
	$(document).ready(function() {
		$("#series").chained("#mark"); /* or $("#series").chainedTo("#mark"); */
		$("#model").chained("#series");
	});
</script>