项目中需要用到三级联动下拉框,所以给在网上查了一下。
用到了 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>