-
2018-12-03 14:27:59
最近在折腾一个很无聊的所谓的商城项目。里面有一个添加商品信息和更新商品信息都需要用到级联下拉菜单。如果只是单纯的普通html就方便多了。于是想了两个方法。
方法一 Ajax+jquery
//#“dalei”=大类型的下拉框。相对应xiaolei=小类型的下拉框
当你点击了大类型中的除了本身被选中之外的其他选项。小类型的下拉框就会进行清空和更新。$(function(){ $("#dalei").change(function(){ var s = new Array(); $("#xiaolei").empty(); var id=$("#dalei").val(); $.ajax({ "url":"danyi?action=fina&id="+id, "async":true, "success":function(data){ var s=data.split(","); for(var i=0;i<s.length;i++){ var i1= new Array(); i1=s[i].split("@"); if(i1[1]!=undefined&&i1[0]!=""){ var s1="<option value="+i1[1]+">"+i1[0]+"</option>"; $("#xiaolei").append(s1); } } } }) }) })
相对应后台就需要做出反应处理。
当然我的做法和用词都没有使用驼峰命名法那些比较正规。。
int did = Integer.valueOf(request.getParameter("id")); //这里通过ajax传送一个ID过来后台servlet。接受到了id就开始遍历这个id。然后寻找相对应的属性 List<shoptype> sc1 = st.getshoptype(); //这个st.getshoptype 是拿到数据库中的一个表。此表里面有对应的大小类 String pinjie = ""; //new一个字符串进行拼接传输一条字符串过去那边分解。 //这里使用了“ @ ” 和“ ,” 2个分隔符。 for (int i = 0; i < sc1.size(); i++) { if (did == sc1.get(i).getGtype_parentid()) { pinjie = pinjie + sc1.get(i).getGtype_name() + "@" + sc1.get(i).getId() + ","; } } response.getWriter().write(pinjie);
方法二 Jquery+jtsl
原理是通过先获取到数据库相对应的那张表里面的所有值。然后转发一个sesion给前台利用C标签来遍历。当我对大类型的选项进行了改变。相对应的下拉也会更变属性。
这里大类的name属性=goods_parentid
小类的name属性=goods_fatherid$(function(){ $("[name='goods_parentid']").change(function () { var id = $(this).val(); $("[name='goods_fatherid']").html(""); var html = ""; <c:forEach items="${GOODTYPES }" var="goodType" varStatus=""> if ("${goodType.gtype_parentid }" == id){ html +="<option value='${goodType.id }'>${goodType.gtype_name }</option>"; } </c:forEach> $("[name='goods_fatherid']").html(html); });
后台servlet相对应的将我拿到的所有数据转发过来
List<shoptype> sc1 = st.getshoptype(); request.getSession().setAttribute("GOODTYPES",sc1);
方法就分享到这里啦~ 新手代码能力差是这样的啦~
更多相关内容 -
ASP.net 下拉列表级联
2022-02-03 11:54:48Asp.Net WEB服务器编程技术>>中做的学习笔记,一些知识点也是跟着教程走的,大家也可以去老师的主页去学习,谢谢大家. 二.前端 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs...一.说明
此文是小白在学习张晨光老师的视频教学<<Asp.Net WEB服务器编程技术>>中做的学习笔记,一些知识点也是跟着教程走的,大家也可以去老师的主页去学习,谢谢大家.
二.前端
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="WebApplication9_ajax_.WebForm3" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> </head> <body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <br /> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> 图书类别:<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged"> </asp:DropDownList> <%--//AutoPostBack:向服务器自动提交,change--> <br /> 图书名称:<asp:DropDownList ID="DropDownList2" runat="server"> </asp:DropDownList> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" /> <asp:AsyncPostBackTrigger ControlID="DropDownList1" EventName="SelectedIndexChanged" /> </Triggers> </asp:UpdatePanel> <asp:Button ID="Button1" runat="server" Text="提交" /> </div> </form> </body> </html>
设计页:
这里我们用了ajax,先放置scriptManager控件,紧接着放置Updatepanel控件,在此控件里,填入我们需要移步运行的代码及控件
可以在此处设置Updatepanel控件的属性,设置在内的,则会在调用时启用AJAX
三.后端
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Data; using System.Collections; namespace WebApplication9_ajax_ { public partial class WebForm3 : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { DataTable dt = ToolMySqlDate.excutSql("SELECT * FROM student_ing"); //运行前先清空列表 DropDownList1.Items.Clear(); DropDownList1.Items.Add("--请选择--"); //将数据库查询出的数据依次赋值给下拉列表 //ListItem(text,vlues) for (int i = 0; i < dt.Rows.Count; i++) { DropDownList1.Items.Add(new ListItem(dt.Rows[i]["chatname"].ToString(), dt.Rows[i]["postid"].ToString())); } } } /// <summary> /// 第一个下拉列表的改变事件 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e) { //AutoPostBack:向服务器自动提交,change //如果选择的不是第一个,则刷新 if (DropDownList1.SelectedIndex != 0) { Hashtable ht = new Hashtable(); //将参数导入 ht.Add("postid", DropDownList1.SelectedValue); DataTable dt = ToolMySqlDate.excutSql("SELECT * FROM student where postid=?postid", ht); //清空 DropDownList2.Items.Clear(); //关联数据 DropDownList2.DataSource = dt; //赋值 DropDownList2.DataTextField = "name"; DropDownList2.DataValueField = "postid"; //数据绑定 DropDownList2.DataBind(); } else { //如果下拉列表1选的是第一个,即"-请选择--"时,清空数据,并返回,不做处理 DropDownList2.Items.Clear(); return; } } } }
四.演示
当选择类别时,会在名称处自动更新数据,这里只是简单的逻辑演示,和业务逻辑无关,请忽视下方图书类别和图书名称所对应的实时数据.
-
Select标签下拉列表二级联动级联实例代码
2020-12-08 21:19:14首先从服务器端,绑定下拉列表,二级下拉的text命名按照一定规则加上一级下拉的ID。 代码如下:var options=new Array(); $(document).ready(function(){ //二级联动 $(‘#ddlPages’).children(‘option’).each... -
select下拉列表级联
2014-10-12 12:26:031、 v1 v2 v3 v4 v1 v2 v3 v4 注意:fireFox需要将name换成id。 2、 test.html: 请选择省名 ...1、
<html>
<head>
</head>
<body>
<select name="s1" οnchange="s2.value=this.value">
<option value="v1">v1</option>
<option value="v2">v2</option>
<option value="v3">v3</option>
<option value="v4">v4</option>
</select>
<select name="s2">
<option value="v1">v1</option>
<option value="v2">v2</option>
<option value="v3">v3</option>
<option value="v4">v4</option>
</select>
</body>
</html>注意:fireFox需要将name换成id。
2、
test.html:
<html>
<head><script type="text/javascript" src="checkCity.js"></script>
</head>
<body onLoad="loadProvince()"><form name=form1>
<select name=province οnchange="cityName(this.selectedIndex)">
<option value="">
请选择省名
</option>
</select><select name=city>
<option value="">
请选择城名
</option>
</select>
</form>
</body>
</html>checkCity.js:
// JavaScript Document
//北京市辖区名称
var city1 = ["东城区","西城区","崇文区","宣武区","朝阳区","海淀区","丰台区","石景山区","房山区","通州区","顺义区","门头沟区","昌平区","大兴区","怀柔区","平谷区","密云县","延庆县"];
//上海市辖区名称
var city2 = ["黄浦区","卢湾区","徐汇区","长宁区","静安区","普陀区","闸北区","虹口区","杨浦区","宝山区","闵行区","嘉定区","浦东新区","金山区","松江区","青浦区","南汇区","奉贤区","崇明县"];
//天津市辖区名称
var city3 = ["和平区","河东区","河西区","南开区","河北区","红桥区","塘沽区","汉沽区","大港区","东丽区","西青区","津南区","北辰区","武清区","宝坻区","宁河县","静海县","蓟县"];
//重庆市辖区名称
var city4 = ["渝中区","大渡口区","江北区","沙坪坝区","九龙坡区","南岸区","北碚区","万盛区","双桥区","渝北区","巴南区","万县区","涪陵区","永川市","合川市","江津市","南川市","长寿县","綦江县","潼南县","荣昌县","壁山县","大足县","铜梁县","梁平县","城口县","垫江县","武隆县","丰都县","忠 县","开 县","云阳县","青龙镇青龙嘴","奉节县","巫山县","巫溪县","南宾镇","中和镇","钟多镇","联合镇","汉葭镇"];
//河北省主要城市名称
var city5 = ["石家庄市","唐山市","秦皇岛市","邯郸市","邢台市","保定市","张家口市","承德市","沧州市","廊坊市","衡水市"];
//山西省主要城市名称
var city6 = ["太原市","大同市","阳泉市","长治市","晋城市","朔州市","晋中市","运城市","忻州市","临汾市","吕梁市"];
//辽宁省主要城市名称
var city7 = ["沈阳市","大连市","鞍山市","抚顺市","本溪市","丹东市","锦州市","营口市","阜新市","辽阳市","盘锦市","铁岭市","朝阳市","葫芦岛市"];
//吉林省主要城市名称
var city8 = ["长春市","吉林市","四平市","辽源市","通化市","白山市","松原市","白城市","延边朝鲜族自治州"];
//河南省主要城市名称
var city9 = ["郑州市","开封市","洛阳市","平顶山市","安阳市","鹤壁市","新乡市","焦作市","濮阳市","许昌市","漯河市","三门峡市","南阳市","商丘市","信阳市","周口市","驻马店市","济源市"];
//江苏省主要城市名称
var city10 = ["南京市","无锡市","徐州市","常州市","苏州市","南通市","连云港市","淮安市","盐城市","扬州市","镇江市","泰州市","宿迁市"];
//浙江省主要城市名称
var city11 = ["杭州市","宁波市","温州市","嘉兴市","湖州市","绍兴市","金华市","衢州市","舟山市","台州市","丽水市"];
//安徽省主要城市名称
var city12 = ["合肥市","芜湖市","蚌埠市","淮南市","马鞍山市","淮北市","铜陵市","安庆市","黄山市","滁州市","阜阳市","宿州市","巢湖市","六安市","亳州市","池州市","宣城市"];
//福建省主要城市名称
var city13 = ["福州市","厦门市","莆田市","三明市","泉州市","漳州市","南平市","龙岩市","宁德市"];
//江西省主要城市名称
var city14 = ["南昌市","景德镇市","萍乡市","九江市","新余市","鹰潭市","赣州市","吉安市","宜春市","抚州市","上饶市"];
//山东省主要城市名称
var city15 = ["济南市","青岛市","淄博市","枣庄市","东营市","烟台市","潍坊市","威海市","济宁市","泰安市","日照市","莱芜市","临沂市","德州市","聊城市","滨州市","菏泽市"];
//湖北省主要城市名称
var city16 = ["武汉市","黄石市","襄樊市","十堰市","荆州市","宜昌市","荆门市","鄂州市","孝感市","黄冈市","咸宁市","随州市","恩施州","仙桃市","潜江市","天门市","神农架林区"];
//湖南省主要城市名称
var city17 = ["长沙市","株洲市","湘潭市","衡阳市","邵阳市","岳阳市","常德市","张家界市","益阳市","郴州市","永州市","怀化市","娄底市","湘西州"];
//广东省主要城市名称
var city18 = ["广州市","深圳市","珠海市","汕头市","韶关市","佛山市","江门市","湛江市","茂名市","肇庆市","惠州市","梅州市","汕尾市","河源市","阳江市","清远市","东莞市","中山市","潮州市","揭阳市","云浮市"];
//海南省主要城市名称
var city19 = ["海口市","龙华区","秀英区","琼山区","美兰区","三亚市"];
//四川省主要城市名称
var city20 = ["成都市","自贡市","攀枝花市","泸州市","德阳市","绵阳市","广元市","遂宁市","内江市","乐山市","南充市","宜宾市","广安市","达州市","眉山市","雅安市","巴中市","资阳市","阿坝州","甘孜州","凉山州"];
//贵州省主要城市名称
var city21 = ["贵阳市","六盘水市","遵义市","安顺市","铜仁地区","毕节地区","黔西南州","黔东南州","黔南州"];
//云南省主要城市名称
var city22 = ["昆明市","大理市","曲靖市","玉溪市","昭通市","楚雄市","红河市","文山市","思茅市","西双版纳市","保山市","德宏市","丽江市","怒江市","迪庆市","临沧市"];
//陕西省主要城市名称
var city23 = ["西安市","铜川市","宝鸡市","咸阳市","渭南市","延安市","汉中市","榆林市","安康市","商洛市"];
//甘肃省主要城市名称
var city24 = ["兰州市","嘉峪关市","金昌市","白银市","天水市","武威市","张掖市","平凉市","酒泉市","庆阳市","定西市","陇南市","临夏州","甘南州"];
//青海省主要城市名称
var city25 = ["西宁市","海东地区","海北州","黄南州","海南州","果洛州","玉树州","海西州"];
//黑龙江省主要城市名称
var city26 = ["哈尔滨市","齐齐哈尔市","鸡西市","鹤岗市","双鸭山市","大庆市","伊春市","佳木斯市","七台河市","牡丹江市","黑河市","绥化市","大兴安岭地区"];
//内蒙古自治区主要城市名称
var city27 = ["呼和浩特市","包头市","乌海市","赤峰市","通辽市","鄂尔多斯市","呼伦贝尔市","巴彦淖尔市","乌兰察布市","兴安盟","锡林郭勒盟","阿拉善盟"];
//广西壮族自治区主要城市名称
var city28 = ["南宁市","柳州市","桂林市","梧州市","北海市","防城港市","钦州市","贵港市","玉林市","百色市","贺州市","河池市","来宾市","崇左市"];
//西藏自治区主要城市名称
var city29 = ["拉萨市","昌都地区","山南地区","日喀则地区","那曲地区","阿里地区","林芝地区"];
//宁夏回族自治区主要城市名称
var city30 = ["银川市","石嘴山市","吴忠市","固原市","中卫市"];
//新疆维吾尔自治区主要城市名称
var city31 = ["乌鲁木齐市","克拉玛依市","吐鲁番地区","哈密地区","和田地区","阿克苏地区","喀什地区","克孜勒苏柯尔克孜自治州","巴音郭楞蒙古自治州","昌吉回族自治州","博尔塔拉蒙古自治州","伊犁哈萨克自治州","塔城地区","阿勒泰地区","石河子市","阿拉尔市","图木舒克市","五家渠市"];
//台湾省主要城市名称
var city32 = ["台北市","高雄市","基隆市","台中市","台南市","新竹市","嘉义市","台北县","宜兰县","桃园县","新竹县","苗栗县","台中县","彰化县","南投县","云林县","嘉义县","台南县","高雄县","屏东县","澎湖县","台东县","花莲县"];
//香港特别行政区主要辖区名称
var city33 = ["中西区","东区","九龙城区","观塘区","南区","深水埗区","黄大仙区","湾仔区","油尖旺区","离岛区","葵青区","北区","西贡区","沙田区","屯门区","大埔区","荃湾区","元朗区"];
//澳门地区
var city34 = ["澳门地区"];
//其它地区
var city35 = ["其它地区"];//全国省会,直辖市,自治区名称
var provinceName = ["北京市","上海市","天津市","重庆市","河北省","山西省","辽宁省","吉林省","河南省","江苏省","浙江省","安徽省","福建省","江西省","山东省","湖北省","湖南省","广东省","海南省","四川省","贵州省","云南省","陕西省","甘肃省","青海省","黑龙江省","内蒙古自治区","广西壮族自治区","西藏自治区","宁夏回族自治区","新疆维吾尔自治区","台湾省","香港特别行政区","澳门特别行政区","其它"];
function province()
{var e = document.form1.province;
for (var i=0; i<provinceName.length; i++)
e.options.add(new Option(provinceName[i], provinceName[i]));
}
function cityName(n)
{
var e = document.form1.city;
for (var i=e.options.length; i>0; i--) e.remove(i);
if (n == 0) return;
var a = eval("city"+ n); //得到城市的数组名
for (var i=0; i<a.length; i++) e.options.add(new Option(a[i], a[i]));
}
function loadProvince()
{
province(); //初始时给省名下拉菜单赋内容
} -
AJAX_Servlet级联下拉列表
2016-01-13 17:47:42AJAX_Servlet级联下拉列表 product.jsp UserServlet.java -
HTML5的option属性:如何使用option属性实现级联下拉列表
2021-06-11 01:00:25这篇文章给大家介绍的内容是关于HTML5的option属性:如何使用option...级联下拉列表--请选择省----请选择市--var province=document.getElementById("prov");var city=document.getElementById("city");var arr_pr...这篇文章给大家介绍的内容是关于HTML5的option属性:如何使用option属性实现级联下拉列表,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
级联下拉列表--请选择省--
--请选择市--
var province=document.getElementById("prov");
var city=document.getElementById("city");
var arr_prov=new Array(new Option("--请选择省--",''),new Option("湖南","hn"),new Option("广东","gd"));
var arr_city=new Array();
arr_city[0]=new Array(new Option("--请选择市--",''));
arr_city[1]=new Array(new Option("长沙",'cs'),new Option("娄底",'ld'),new Option("永州",'yz'));
arr_city[2]=new Array(new Option("广州",'gz'),new Option("深圳",'sz')); //动态载入所有省份
function load(){ for(var i=0;i
//清空上次的选项
city.options.length=0; //获取省一级的下拉列表选中的索引
var index=province.selectedIndex;
for(var i=0;i
city.options[i]=arr_city[index][i];
} }
相关文章推荐:
html5自定义属性:如何获取自定义属性值(附代码)
HTML的Select对象如何进行Option对象的操作
-
AJAX重构+级联下拉列表
2014-11-03 11:24:58AJAX重构+级联下拉列表,java web前台级联下拉列表代码 -
jQuery 下拉列表 二级联动插件分享
2020-12-11 09:09:47jQuery二级联动插件:jQuery.selected 一个页面可以引用多个联动效果,使用方法: 配置js: 代码如下: var defaults = { NextSelId: ‘#Select2’, SelTextId: ‘#Text1’, Separator: ‘–‘, SelStrSet: [ { name:... -
JS、AJAX 实现级联下拉列表
2020-05-18 12:21:04实现在下拉框的级联查询,可以使得用户不进行页面跳转便可以根据下拉框中所选的高级选项更改低级选项的内容。增进用户体验 以省市县/区为例,在用户选择不同的省时,更新后面的市和对应的县/区;在用户选择不同的市... -
java web下开发二级级联下拉菜单(数据库实现的)
2011-05-23 14:05:02网上级联菜单确有不少,单大多是直接写死到jsp页面中的,本代码是用mysql的数据库实现的,希望对大家有帮助!!! -
web前端学习(五)—— HTML表单(2)- 多选下拉列表以及控件
2021-12-09 22:28:07一、多选下拉列表 1、框架:<select> <option> ? </option> </select> 2、multiple="multiple"是用来:支持多选 size是用来:设置条目数量 代码举例: <!DOCTYPE html> <... -
JavaWeb——使用Ajax实现级联下拉列表
2019-12-15 15:47:04利用 Ajax 技术可以在页面实现一个级联下拉列表。 -
Yii中用Ajax实现下拉列表级联的范例
2012-07-30 12:01:58页面View中 $form->dropdownList($model,"code", array('1'=>'1','2'=>'2','3'=>'3',), array( 'ajax'=>array( ...参考:http://www.jems.me/blog/web/84-yii-create-dropdown-lists-for-related-ar.html -
WEB项目创建级联下拉菜单
2014-08-31 20:56:371、WEB前台JSP页面相关代码:(type.jsp)这里只实现了三级级联菜单,还要实现多级的话,就可以照猫画虎,以此类推: $(function(){ //类型选择下拉列表 var $type=$("#type"); //... -
用Ajax技术和dwr框架两种方式实现下拉列表的级联效果
2017-04-06 15:51:42在开发web页面时,常常需要达到某一个文本输入框,更多的是下拉框随另一个下拉框的改变而改变值的"联动"效果。实现这种效果,往往需要...需要实现级联效果的下拉列表: 业务 <s:select id ="serviceId" name= -
Bootstrap级联下拉菜单,你肯定用得到
2016-03-25 18:22:39今天我将介绍自定义的bootstrap级联下拉菜单(你肯定用得到),主要应用场合有省市级关联菜单等等 -
js级联控制省市区下拉菜单——数据读取
2018-03-16 14:07:51http://blog.csdn.net/qq_33323054/article/details/79580121 之前介绍了如何用js级联控制省市区下拉菜单,在上一篇博文末尾,博主提到了一个promptinfo()函数;这个函数将下拉菜单中的省市区放在了一个字符串中并... -
Mybatis + js 实现下拉列表二级联动
2021-06-11 11:54:07Mybatis + js 实现下拉列表二级联动学习内容:一、业务需求二、实现效果三、代码实现1. province_city.jsp2. TwoController2. Province3. Province总结: 学习内容: 一、业务需求 实现省份与城市的二级联动 二、... -
用javascript 制作级联下拉菜单(三级)
2020-11-11 17:21:22<!DOCTYPE html> <html> <head> <meta charset="UTF-8">...meta name="viewport" content="width=device-width, initial-scale=1.0">...-- 制作级联下拉菜单(三级) --> -
FineUI秘密花园(八) — 下拉列表控件
2017-05-19 16:17:07下拉列表也是Web开发中常用的控件之一,用来从一组可选项中选取一项。FineUI中的下拉列表不仅可以通过ASPX标签声明,也可以绑定到各种数据源。FineUI还根据实际项目的需要,扩展了一种模拟树的下拉列表。 ... -
ajax异步请求数据库实现级联下拉菜单。
2021-05-17 15:37:54ajax实现级联下拉菜单,使用Springboot实现。 思路很简单,使用ajax异步请求数据库数据即可。 实现效果: 废话不多说,现在我们来开始实现! 第一步、 创建三张表:省、市、县。 CREATE TABLE `province` ( `id` ... -
JSP下拉选框,级联选择
2020-12-31 07:13:19package com.wbh.wbhsq.web;import java.util.HashMap;import java.util.List;import java.util.Map;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Contro... -
Knockout.js生成无限级的关联select下拉列表
2019-08-10 12:03:20先上效果图: 文档结构: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Knockout.js多级select绑定</title> <...span id="co... -
javascript级联下拉列表
2013-05-10 14:13:00我写的一个级联下拉列表: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> #d1 { width: 400px; height: 250px; background-... -
SharePoint 2010 级联下拉列表 (Cascading DropDownList)
2019-09-23 15:24:35一直搞不清楚为啥SharePoint 在列表中没有提供级联列的功能.既然没有提供, 我们只能自己去写, 还好我们不需要从零去实现这个功能, 已经有很多前辈提供了很多解决方案, 我们就没有必须重复造轮子. 目前可行的方案很... -
Ajax常用实例-级联下拉列表
2018-07-31 23:15:24级联下拉列表 title > < meta http-equiv = "pragma" content = "no-cache" > < meta http-equiv = "cache-control" content = "no-cache" > < meta http-equiv = "expires" content = "0" > ...