项目中需要用到三级联动下拉框,所以给在网上查了一下。
用到了 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>
相关推荐
jquery flexbox 下拉框插件 里面有demo
jQuery 多级联动下拉框插件
jQuery自定义下拉框插件 jQuery自定义下拉框插件 jQuery自定义下拉框插件 jQuery自定义下拉框插件 jQuery自定义下拉框插件 jQuery自定义下拉框插件
jQuery联动下拉框 jQuery optionTree
jquery 三级联动下拉框jquery 三级联动下拉框jquery 三级联动下拉框jquery 三级联动下拉框jquery 三级联动下拉框jquery 三级联动下拉框
jquery动态创建联动下拉框和jquery动态创建下拉框
jQuery联动下拉框表单美化.zip
一组经过美化的jQuery select下拉框单选和多选插件,带搜索功能,模拟select下拉框多选菜单选择效果。
jquery.multi-select.js是一款jQuery多选下拉框插件。该插件可以将select元素转换为带checkbox的多选下拉框,非常实用。
jquery select下拉框插件,支持实时搜索,分页
这是一款带图标的jQuery自定义下拉框插件。该jquery插件可以动js代码中动态渲染下拉框的选项,生成带图标的下拉框选项,非常实用。
jQuery下拉框美化插件是一款带图标的5种主题方形select下拉框选择美化样式代码。
jQuery手机下拉框select jQuery手机下拉框select jQuery手机下拉框select
插件描述:jQuery智能下拉框插件chosenmaster。 参考示例:http://www.jq22.com/jquery-info4996
绑定动态数据的jquery下拉框插件 绑定动态数据的jquery下拉框插件
强大的jquery下拉框插件 下拉框展示带列表分页功能,适合下拉框大量数据展示 下拉框带快速查找,可以快速筛选 支持多选 基于jQuery、Bootstrap2、3开发 也可应用于无任何UI框架的原生HTML环境 Autocomplete输入自动...
jQuery下拉框美化插件selectList是一款简单、轻量级、跨浏览器的jquery下拉框模拟插件,支持键盘操作选项、支持ESC关闭下拉框。
使用jquery实现的风格的多选下拉框demo,直接打开index.html就可以使用。适合集成到后台系统的多选下拉框业务场景
带搜索框的jQuery下拉框美化插件;带搜索框的jQuery下拉框美化插件;带搜索框的jQuery下拉框美化插件