Jquery联动下拉菜单

简介: 用Jquery 1.4.4 实现的联动下拉菜单,估计在Jquery 1.2版本以上都可用。 联动下拉菜单是一主一从两个select,切换主select时,从select的内容跟着改变。这里是把从select的项目按组optgroup全部加载进来,然后切换主select时更新从select组的显示或者隐藏。

用Jquery 1.4.4 实现的联动下拉菜单,估计在Jquery 1.2版本以上都可用。

联动下拉菜单是一主一从两个select,切换主select时,从select的内容跟着改变。这里是把从select的项目按组optgroup全部加载进来,然后切换主select时更新从select组的显示或者隐藏。注意从select的组次序和主select项次序要一致。

 

   HTML代码

 

<select id="province">
  <option value="GD">广东</option>
  <option value="JS">江苏</option>
  <option value="FJ">福建</option>
</select>

<select id="city">
  <option value="">(全部)</option>
  <optgroup label="广东">
    <option value="020">广州</option>
    <option value="0755">深圳</option>
  </optgroup>
  <optgroup label="江苏">
    <option value="025">南京</option>
    <option value="0512">苏州</option>
  </optgroup>
  <optgroup label="福建">
    <option value="0591">福州</option>
    <option value="0592">厦门</option>
  </optgroup>
</select>
 

 

   JS代码

function double_select(master, slave){

    var change_slave = function() {

        var idx = $(master).attr("selectedIndex") + 1;

        $(slave).children("optgroup").hide();

        $(slave).children("optgroup:nth-child("+idx+")").show();

    }

    $(master).change( change_slave );

    change_slave();

}

//使用
$(function(){
    double_select("#province", "#city");
});
目录
相关文章
|
7月前
|
JavaScript
jQuery 下拉菜单案例(透明+children+this)
jQuery 下拉菜单案例(透明+children+this)
45 0
|
1月前
|
JavaScript 前端开发
jquery实现二级导航下拉菜单效果实例
jquery实现二级导航下拉菜单效果实例
19 0
|
6月前
|
JavaScript 前端开发
前端基础 - JQuery实现省级联动
前端基础 - JQuery实现省级联动
32 0
|
7月前
|
JavaScript
jQuery 下拉菜单 添加动画
jQuery 下拉菜单 添加动画
54 0
|
JavaScript 前端开发
jQuery练习——下拉菜单
当我们在做导航栏、少量数据表格、层级列表时,使用无序列表ul、li可以实现想要的效果。这里我们先用无序列表ul、li完成页面结构,为每一个元素添加a标签,即超链接。
132 0
|
JavaScript
jquery 实现 table 和 标题 的联动显示
jquery 实现 table 和 标题 的联动显示
103 0
jquery 实现 table 和 标题 的联动显示
|
JavaScript
jquery:简洁版滑动下拉菜单-21
jquery:简洁版滑动下拉菜单-21
80 0
jquery:简洁版滑动下拉菜单-21
|
JavaScript
jquery简洁版滑动下拉菜单问题解决-22
jquery简洁版滑动下拉菜单问题解决-22
81 0
jquery简洁版滑动下拉菜单问题解决-22
|
JavaScript
使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态。点击列表的项,切换二级列表的显示或隐藏状态
使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态。点击列表的项,切换二级列表的显示或隐藏状态
385 0
使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态。点击列表的项,切换二级列表的显示或隐藏状态
|
JavaScript
js_jQuery【下拉菜单联动dom操作】
js_jQuery【下拉菜单联动dom操作】
101 0
js_jQuery【下拉菜单联动dom操作】