澳门新葡亰平台游戏网站js实现简单的联动菜单效果

正文实例陈诉了js达成轻便的联合浮动菜单功能。分享给我们供大家仿效。具体如下:

JS封装的三级联合浮动菜单(使用时只须要一行js代码State of Qatar,

前言

在实际的连串支出中,大家平时要求三级联合浮动,举例省市区的抉择,商品的三级分类的抉择等等。

而网络却找不到三个代码完整、作用强盛、使用简便的三级联合浮动菜单,大都只是简短的讲了刹那间贯彻思路。

上面就给大家大饱眼福自身在工作中封装并在等级次序中接纳的三级级联操作代码,如有错误只怕不当的地点款待我们指正。

使用简便(只须要一行代码卡塔尔国

能够依附须求设置是还是不是出示“请采纳”项

支撑回调(在三级分类加载成功后触发回调事件卡塔尔

辅助八个页面五个级联菜单

演示效果预览:

澳门新葡亰平台游戏网站 1

三级联合浮动封装

原理:将selec标签以至有关的html代码用js数组对象的点子结合在联合。

js如下:

澳门新葡亰平台游戏网站 2

任何代码如下:

//三级分类选择器 by 王军华 20160721
var WJH_Category = {
  Category1ID: "wjh_category1_select",
  Category2ID: "wjh_category2_select",
  Category3ID: "wjh_category3_select",
  DataURL: "/Public/GetProductCategorys",//数据URL
  //初始化
  //wrapID :  包裹三级分类的标签ID
  //category1: 省ID 对应 Value
  //category2:   市ID 对应 Value
  //category3:  县ID 对应 Value
  //useEmpty: 是否支持请选择,如果为false则默认三级都加载
  //successCallBack:加载完成后的回调函数
  Init: function (wrapID, category1, category2, category3, useEmpty, successCallBack) {
    WJH_Category.InitTag(wrapID, useEmpty);
    WJH_Category.InitData(category1, category2, category3, useEmpty, successCallBack);
    WJH_Category.category1Select(useEmpty);
    WJH_Category.category2Select(useEmpty);
  },
  //初始化标签
  InitTag: function (wrapID, useEmpty) {
    var tmpInit = "";
    tmpInit += "一级分类:";
    if (useEmpty) {
      tmpInit += "<select id='" + WJH_Category.Category1ID + "' name='" + WJH_Category.Category1ID + "'><option value='0'>--请选择--</option></select>";
    } else {
      tmpInit += "<select id='" + WJH_Category.Category1ID + "' name='" + WJH_Category.Category1ID + "'></select>";
    }
    tmpInit += "二级分类:";
    if (useEmpty) {
      tmpInit += "<select id='" + WJH_Category.Category2ID + "' name='" + WJH_Category.Category2ID + "'><option value='0'>--请选择--</option></select>";
    } else {
      tmpInit += "<select id='" + WJH_Category.Category2ID + "' name='" + WJH_Category.Category2ID + "'></select>";
    }
    tmpInit += "三级分类:";
    if (useEmpty) {
      tmpInit += "<select id='" + WJH_Category.Category3ID + "' name='" + WJH_Category.Category3ID + "'><option value='0'>--请选择--</option></select>";
    } else {
      tmpInit += "<select id='" + WJH_Category.Category3ID + "' name='" + WJH_Category.Category3ID + "'></select>";
    }
    $("#" + wrapID + "").html(tmpInit);
  },
  //初始化数据--包括修改
  InitData: function (incategory1, incategory2, incategory3, useEmpty, successCallBack) {
    //添加
    if (incategory1 == 0) {
      $.get(WJH_Category.DataURL, {}, function (category1) {
        var firstcategory1Guid = category1[0].Value;
        //初始化一级分类
        for (var i = 0; i < category1.length; i++) {
          var tmp_option = " <option value='" + category1[i].Value + "'>" + category1[i].Display + "</option>";
          $("#" + WJH_Category.Category1ID + "").html($("#" + WJH_Category.Category1ID + "").html() + tmp_option);
        }
        if (useEmpty) {
          successCallBack();
          return;
        }
        //初始化二级分类
        $.get(WJH_Category.DataURL, { pid: firstcategory1Guid }, function (category2) {
          var firstcategory2Guid = category2[0].Value;
          for (var i = 0; i < category2.length; i++) {
            var tmp_option = " <option value='" + category2[i].Value + "'>" + category2[i].Display + "</option>";
            $("#" + WJH_Category.Category2ID + "").html($("#" + WJH_Category.Category2ID + "").html() + tmp_option);
          }
          //初始化县
          $.get(WJH_Category.DataURL, { pid: firstcategory2Guid }, function (category3) {
            for (var i = 0; i < category3.length; i++) {
              var tmp_option = " <option value='" + category3[i].Value + "'>" + category3[i].Display + "</option>";
              $("#" + WJH_Category.Category3ID + "").html($("#" + WJH_Category.Category3ID + "").html() + tmp_option);
            }
            successCallBack();
          }, "json");
        }, "json");
      }, "json");
    }
      //修改
    else {
      $.get(WJH_Category.DataURL, {}, function (category1) {
        //初始化一级分类
        for (var i = 0; i < category1.length; i++) {
          var tmp_option = "";
          if (category1[i].Value == incategory1) {
            tmp_option = " <option selected='selected' value='" + category1[i].Value + "'>" + category1[i].Display + "</option>";
          } else {
            tmp_option = " <option value='" + category1[i].Value + "'>" + category1[i].Display + "</option>";
          }
          $("#" + WJH_Category.Category1ID + "").html($("#" + WJH_Category.Category1ID + "").html() + tmp_option);
        }
        //初始化二级分类
        $.get(WJH_Category.DataURL, { pid: incategory1 }, function (category2) {
          for (var i = 0; i < category2.length; i++) {
            var tmp_option = "";
            if (category2[i].Value == incategory2) {
              tmp_option = " <option selected='selected' value='" + category2[i].Value + "'>" + category2[i].Display + "</option>";
            } else {
              tmp_option = " <option value='" + category2[i].Value + "'>" + category2[i].Display + "</option>";
            }
            $("#" + WJH_Category.Category2ID + "").html($("#" + WJH_Category.Category2ID + "").html() + tmp_option);
          }
          //初始化三级分类
          $.get(WJH_Category.DataURL, { pid: incategory2 }, function (category3) {
            for (var i = 0; i < category3.length; i++) {
              var tmp_option = "";
              if (category3[i].Value == incategory3) {
                tmp_option = " <option selected='selected' value='" + category3[i].Value + "'>" + category3[i].Display + "</option>";
              } else {
                tmp_option = " <option value='" + category3[i].Value + "'>" + category3[i].Display + "</option>";
              }
              $("#" + WJH_Category.Category3ID + "").html($("#" + WJH_Category.Category3ID + "").html() + tmp_option);
            }
            successCallBack();
          }, "json");
        });
      });
    }
  },
  //一级分类change
  category1Select: function (useEmpty) {
    $("#" + WJH_Category.Category1ID + "").change(function () {
      var optionHtml = "";
      if (useEmpty) {
        optionHtml = "<option value='0'>--请选择--</option>";
      }
      $("#" + WJH_Category.Category2ID + "").html(optionHtml);
      $("#" + WJH_Category.Category3ID + "").html(optionHtml);
      var tmpSelectedcategory1 = $("#" + WJH_Category.Category1ID + " option:selected").val();
      //初始化二级分类
      $.get(WJH_Category.DataURL, { pid: tmpSelectedcategory1 }, function (category2) {
        var firstcategory2Guid = category2[0].Value;
        for (var i = 0; i < category2.length; i++) {
          var tmp_option = " <option value='" + category2[i].Value + "'>" + category2[i].Display + "</option>";
          $("#" + WJH_Category.Category2ID + "").html($("#" + WJH_Category.Category2ID + "").html() + tmp_option);
        }
        if (useEmpty) {
          return;
        }
        //初始化三级分类
        $.get(WJH_Category.DataURL, { pid: firstcategory2Guid }, function (category3) {
          for (var i = 0; i < category3.length; i++) {
            var tmp_option = " <option value='" + category3[i].Value + "'>" + category3[i].Display + "</option>";
            $("#" + WJH_Category.Category3ID + "").html($("#" + WJH_Category.Category3ID + "").html() + tmp_option);
          }
        }, "json");
      }, "json");
    });
  },
  //二级分类change
  category2Select: function (useEmpty) {
    $("#" + WJH_Category.Category2ID + "").change(function () {
      var optionHtml = "";
      if (useEmpty) {
        optionHtml = "<option value='0'>--请选择--</option>";
      }
      $("#" + WJH_Category.Category3ID + "").html(optionHtml);
      var tmpSelectedcategory2 = $("#" + WJH_Category.Category2ID + " option:selected").val();
      //初始化三级分类
      $.get(WJH_Category.DataURL, { pid: tmpSelectedcategory2 }, function (category3) {
        for (var i = 0; i < category3.length; i++) {
          var tmp_option = " <option value='" + category3[i].Value + "'>" + category3[i].Display + "</option>";
          $("#" + WJH_Category.Category3ID + "").html($("#" + WJH_Category.Category3ID + "").html() + tmp_option);
        }
      }, "json");
    });
  }
};

三级联动选拔演示

本插件信赖jQuery,使用前请先在页面上引进jQuery文件

先定义三个演示页面如下:DIV1,DIV2是用来包裹生成的联合浮动菜单的

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>GetProductCategorys</title>
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/extjs/product_category_select.js"></script>
</head>
<body>
<script>
$(function () {
//添加模式
WJH_Category.Init("DIV1", 0, 0, 0, true); 
});
</script>
div id="DIV1"></div>
<div id="DIV2"></div>
</body>
</html>

1.带“请选择的”增加格局

澳门新葡亰平台游戏网站 3

率马以骥效果如下:

澳门新葡亰平台游戏网站 4

2.不带“请选用的”加多方式

澳门新葡亰平台游戏网站 5

示范效果如下:

澳门新葡亰平台游戏网站 6

3.带“请接受的”修改形式

给三级级联菜单最初化时赋上默许值(应用项景:改革顾客的收货地址、校正商品的所属三级分类卡塔尔

澳门新葡亰平台游戏网站 7

示范效果如下:

澳门新葡亰平台游戏网站 8

4.不带“请接纳的”纠正情势

澳门新葡亰平台游戏网站 9

演示效果如下:

澳门新葡亰平台游戏网站 10

5.修改select的name和id

澳门新葡亰平台游戏网站 11

结果如下:

澳门新葡亰平台游戏网站 12

6.改过获取数据的U大切诺基L

澳门新葡亰平台游戏网站 13

7.扶助回调函数

支持回调函数的功利是在三级联合浮动菜单数据加载完结后触发回调函数,那样能够缓和的主题素材是:在html加载的时候利用联合浮动菜单里面包车型大巴数码做一些特别操作,比如:在页面加载的时候将要依照三级联合浮动菜单里面包车型大巴数据值到服务器查询数据。

澳门新葡亰平台游戏网站 14

8.一个页面八个级联菜单

供给留意的是:如果二个页面由多少个一律的三级联动菜单,那么肯定要给三级联合浮动菜单对应的select改名

***************在意上边这句话***************

上边封装的三级操作使用比较简单,然则不扶植贰个页面展现八个级联菜单,因而作者又将原代码举行改换(改成了闭包对象卡塔尔(قطر‎以便帮衬八个页面三个级联菜单。不过操作上多了一整套代码。使用上大致近似

代码预览:

澳门新葡亰平台游戏网站 15

更改后的js代码如下:

//三级分类选择器 by 王军华 20160721
function WJH_Category_Plus() {
this.Category1ID= "wjh_category1_select";
this.Category2ID = "wjh_category2_select";
this.Category3ID = "wjh_category3_select";
this.DataURL = "/Public/GetProductCategorys";//数据URL 
//初始化
//wrapID : 包裹三级分类的标签ID
//category1: 省ID 对应 Value
//category2: 市ID 对应 Value
//category3: 县ID 对应 Value
//useEmpty: 是否支持请选择,如果为false则默认三级都加载
//successCallBack:加载完成后的回调函数
this.Init = function (wrapID, category1, category2, category3, useEmpty, successCallBack) { 
this.InitTag(wrapID, useEmpty);
this.InitData(category1, category2, category3, useEmpty, successCallBack);
this.category1Select(useEmpty);
this.category2Select(useEmpty);
};
//初始化标签
this.InitTag = function (wrapID, useEmpty) {
var tmpInit = "";
tmpInit += "一级分类:";
if (useEmpty) {
tmpInit += "<select id='" + this.Category1ID + "' name='" + this.Category1ID + "'><option value='0'>--请选择--</option></select>";
} else {
tmpInit += "<select id='" + this.Category1ID + "' name='" + this.Category1ID + "'></select>";
}
tmpInit += "二级分类:";
if (useEmpty) {
tmpInit += "<select id='" + this.Category2ID + "' name='" + this.Category2ID + "'><option value='0'>--请选择--</option></select>";
} else {
tmpInit += "<select id='" + this.Category2ID + "' name='" + this.Category2ID + "'></select>";
}
tmpInit += "三级分类:";
if (useEmpty) {
tmpInit += "<select id='" + this.Category3ID + "' name='" + this.Category3ID + "'><option value='0'>--请选择--</option></select>";
} else {
tmpInit += "<select id='" + this.Category3ID + "' name='" + this.Category3ID + "'></select>";
}
$("#" + wrapID + "").html(tmpInit);
};
//初始化数据--包括修改
this.InitData = function (incategory1, incategory2, incategory3, useEmpty, successCallBack) {
var c1 = this.Category1ID;
var c2 = this.Category2ID;
var c3 = this.Category3ID;
var dataUrl = this.DataURL;
//添加
if (incategory1 == 0) {
$.get(dataUrl, {}, function (category1) {
var firstcategory1Guid = category1[0].Value;
//初始化一级分类
for (var i = 0; i < category1.length; i++) { 
var tmp_option = " <option value='" + category1[i].Value + "'>" + category1[i].Display + "</option>";
$("#" + c1 + "").html($("#" + c1 + "").html() + tmp_option);
}
if (useEmpty) {
successCallBack();
return;
}
//初始化二级分类
$.get(dataUrl, { pid: firstcategory1Guid }, function (category2) {
var firstcategory2Guid = category2[0].Value;
for (var i = 0; i < category2.length; i++) {
var tmp_option = " <option value='" + category2[i].Value + "'>" + category2[i].Display + "</option>";
$("#" + c2 + "").html($("#" + c2 + "").html() + tmp_option);
}
//初始化县
$.get(dataUrl, { pid: firstcategory2Guid }, function (category3) {
for (var i = 0; i < category3.length; i++) {
var tmp_option = " <option value='" + category3[i].Value + "'>" + category3[i].Display + "</option>";
$("#" + c3 + "").html($("#" + c3 + "").html() + tmp_option);
}
successCallBack();
}, "json");
}, "json");
}, "json");
}
//修改
else {
$.get(dataUrl, {}, function (category1) {
//初始化一级分类
for (var i = 0; i < category1.length; i++) {
var tmp_option = "";
if (category1[i].Value == incategory1) {
tmp_option = " <option selected='selected' value='" + category1[i].Value + "'>" + category1[i].Display + "</option>";
} else {
tmp_option = " <option value='" + category1[i].Value + "'>" + category1[i].Display + "</option>";
}
$("#" + c1 + "").html($("#" + c1 + "").html() + tmp_option);
}
//初始化二级分类
$.get(dataUrl, { pid: incategory1 }, function (category2) {
for (var i = 0; i < category2.length; i++) {
var tmp_option = "";
if (category2[i].Value == incategory2) {
tmp_option = " <option selected='selected' value='" + category2[i].Value + "'>" + category2[i].Display + "</option>";
} else {
tmp_option = " <option value='" + category2[i].Value + "'>" + category2[i].Display + "</option>";
}
$("#" + c2+ "").html($("#" + c2 + "").html() + tmp_option);
}
//初始化三级分类
$.get(dataUrl, { pid: incategory2 }, function (category3) {
for (var i = 0; i < category3.length; i++) {
var tmp_option = "";
if (category3[i].Value == incategory3) {
tmp_option = " <option selected='selected' value='" + category3[i].Value + "'>" + category3[i].Display + "</option>";
} else {
tmp_option = " <option value='" + category3[i].Value + "'>" + category3[i].Display + "</option>";
}
$("#" + c3 + "").html($("#" + c3 + "").html() + tmp_option);
}
successCallBack();
}, "json");
});
});
}
};
//一级分类change
this.category1Select = function (useEmpty) {
var c1 = this.Category1ID;
var c2 = this.Category2ID;
var c3 = this.Category3ID;
var dataUrl = this.DataURL;
$("#" + c1 + "").change(function () {
var optionHtml = "";
if (useEmpty) {
optionHtml = "<option value='0'>--请选择--</option>";
}
$("#" + c2+ "").html(optionHtml);
$("#" + c3 + "").html(optionHtml);
var tmpSelectedcategory1 = $("#" + c1 + " option:selected").val();
//初始化二级分类
$.get(dataUrl, { pid: tmpSelectedcategory1 }, function (category2) {
var firstcategory2Guid = category2[0].Value;
for (var i = 0; i < category2.length; i++) {
var tmp_option = " <option value='" + category2[i].Value + "'>" + category2[i].Display + "</option>";
$("#" + c2 + "").html($("#" +c2+ "").html() + tmp_option);
}
if (useEmpty) {
return;
}
//初始化三级分类
$.get(dataUrl, { pid: firstcategory2Guid }, function (category3) {
for (var i = 0; i < category3.length; i++) {
var tmp_option = " <option value='" + category3[i].Value + "'>" + category3[i].Display + "</option>";
$("#" + c3 + "").html($("#" + c3 + "").html() + tmp_option);
}
}, "json");
}, "json");
});
};
//二级分类change
this.category2Select = function (useEmpty) {
var c1 = this.Category1ID;
var c2 = this.Category2ID;
var c3 = this.Category3ID;
var dataUrl = this.DataURL;
$("#" + c2 + "").change(function () {
var optionHtml = "";
if (useEmpty) {
optionHtml = "<option value='0'>--请选择--</option>";
}
$("#" + c3+ "").html(optionHtml);
var tmpSelectedcategory2 = $("#" + this.Category2ID + " option:selected").val();
//初始化三级分类
$.get(dataUrl, { pid: tmpSelectedcategory2 }, function (category3) {
for (var i = 0; i < category3.length; i++) {
var tmp_option = " <option value='" + category3[i].Value + "'>" + category3[i].Display + "</option>";
$("#" +c3 + "").html($("#" + c3+ "").html() + tmp_option);
}
}, "json");
});
}
}

利用如下:

代码:

澳门新葡亰平台游戏网站 16

演示:

澳门新葡亰平台游戏网站 17

上述所述是作者给我们介绍的JS封装的三级联合浮动菜单(使用时只必要一行js代码卡塔尔(قطر‎,希望对大家有着援助,假如我们有别的疑问请给小编留言,作者会及时过来我们的。在这里也特别谢谢大家对帮客之家网址的扶助!

前言
在实际的花色支出中,大家平常须求三级联合浮动,比方省市区的选料,商品的三级分…

那是三个最轻易易行的js联合浮动菜单代码,在DW里可以自动生成,不想在DW里生成的话,把此份代码拷贝下拉匡正也能够。网页上常用到一种Select联合浮动菜单。

运转效果截图如下:

在线演示地址如下:

具体代码如下:

htmlheadtitle简单的Select联动菜单代码/title/headbodyFORM name="F1"SELECT NAME="select1" onChange="set_list(this.options.selectedIndex)"OPTION SELECTED流行音乐/OPTIONOPTION网上书籍/OPTIONOPTION软件下载/OPTION/SELECTSELECT NAME="select2"  OPTION SELECTED请选网站/OPTION /SELECTSCRIPT LANGUAGE="JavaScript" var l=document.F1.select1.options.length;//取得第一下拉菜单的选项数目var group=new Array(l)//根据这个数目创建数组for (i=0; il; i++)//上一个数组的每一个元素也是数组group[i]=new Array() //接下来创建选项,为第二下拉菜单定义内容group[0][0]=new Option("CNTV","") group[0][1]=new Option("音乐天堂","#") group[0][2]=new Option("搜狗音乐","") group[1][0]=new Option("网页特效","/jscss") group[1][1]=new Option("白鹿书院","") group[2][0]=new Option("华军软件园","") group[2][1]=new Option("搜狐下载 ","") group[2][2]=new Option("中国下载","") var selobj=document.F1.select2; //设定需要动态改变的对象是第二下拉菜单 function set_list(x) //x表示第一菜单被选定的内容{ for (m=selobj.options.length-1;m0;m--) //先清除第二菜单的选项selobj.options[m]=null for (i=0;igroup[x].length;i++){//根据第一菜单的选定序号,丛控件数组中提取菜单选项放进第二菜单selobj.options[i]=group[x][i]//这里也可以创建新的对象,例如:selobj.options[i]=new Option(group[x][i].text,group[x][i].value) } selobj.options[0].selected=true//选定第0号选项} function go(){//这个函数用来将窗口导航到指定的URLlocation=selobj.options[selobj.selectedIndex].value} /SCRIPT /FORM pINPUT TYPE="BUTTON" NAME="Button" VALUE="go" onclick="go()" /pp /p/body/html

但愿本文所述对大家的javascript程序设计具备助于。

You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图