使用js对form表单二级菜单联动效果实现

已于 2023-09-02 12:51:53 修改
阅读量351 收藏 2
点赞数
分类专栏： # JavaScript 前端 文章标签： html javascript html5
于 2021-06-03 19:20:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46168848/article/details/117532724
版权

使用js对form表单二级菜单联动效果实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>form表单之select操作</title>
<script type="text/javascript">
var arr_province = ["请选择省/城市","北京市","上海市","天津市","重庆市","深圳市","广东省","河南省"];
var arr_city = [
                ["请选择城市/地区"],
                ["东城区","西城区","朝阳区","宣武区","昌平区","大兴区","丰台区","海淀区"],
                ['宝山区','长宁区','丰贤区', '虹口区','黄浦区','青浦区','南汇区','徐汇区','卢湾区'],
                ['和平区', '河西区', '南开区', '河北区', '河东区', '红桥区', '塘古区', '开发区'],
                ['俞中区', '南岸区', '江北区', '沙坪坝区', '九龙坡区', '渝北区', '大渡口区', '北碚区'],
                ['福田区', '罗湖区', '盐田区', '宝安区', '龙岗区', '南山区', '深圳周边'],
                ['广州市','惠州市','汕头市','珠海市','佛山市','中山市','东莞市'],
                ['郑州市','洛阳市','安阳市','登封市','新密市','南阳市']
            ];
 
onload = function() {
    var oForm = document.getElementById('form1');//通过Id获取form标签元素
    var oProvince = oForm.children[0];//省份的下拉菜单标签对象赋值给oProvince
    var oCity = oForm.children[1];//城市的下拉菜单选项标签对象赋值给oCity
 
    // 添加点击onchange事件
    oProvince.onchange = function() {
		/*
		HTML DOM Select 对象
		selectedIndex	设置或返回下拉列表中被选项目的索引号。
		*/
        var _this = this.selectedIndex;//把被选中的选项的索引返回赋值给_this
        // 默认进来高度清零
        oCity.length = 0;
        // 指定城市下拉的高度
        initCity(_this);
    };
	// 城市下拉内容高;
	function initCity(index){
	    // 指定城市下拉的高度
	    oCity.length = arr_city[index].length;//把城市数组的长度---> 赋值给城市下拉菜单的长度
	    // 循环数组, 把内容写到下拉列表中去
		//把被选中的选项的索引当做参数传递进来
	    for( var i = 0; i < arr_city[index].length; i++ ){
	        oCity.options[i].text = arr_city[index][i];
	        oCity.options[i].value = arr_city[index][i];
	    }
	};
    // 初始化下拉列表
    init();
    // init select
    function init(){
        var index = 0;
        // 指定下拉的高度
        oProvince.length = arr_province.length;//把省份数组对象的长度赋值给省份下拉菜单对象
        // 循环数组, 把内容写到下拉列表中去
        for( var i = 0; i < arr_province.length; i++ ){
            oProvince.options[i].text = arr_province[i];
            oProvince.options[i].value = arr_province[i];
        }
        // 指定默认索引号
        oProvince.selectedIndex = index;
        // 指定城市下拉的高度
        initCity(index);
    }
};

</script>
</head>
 
<body>
<form id="form1">
    省份: <select name="province" style="width:130px;"></select>
 
    城市: <select name="city" style="width:130px;"></select>
</form>
</body>
</html>
岁月的眸
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript实现二级菜单
weixin_43729867的博客
02-13 2857
第一次尝试使用JS实现一个二级菜单栏 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
JS二级菜单
xing942012的博客
11-26 2110
我们使用HTML+css+js来写出二级菜单的简易效果 首先来看HTML的代码，这个没什么好说的 <div class="box"> <div class="topbox"> <ul> <li class="bgc">春雨</li> <li>夏风</li> <li>秋雾</li> <li>冬雪</li> &l
用js将form表单同时提交到两个不同页面的方法
管子（zero）的杂乱空间
11-30 1810
<!--google_ad_client = "pub-4490194096475053";/* 内容页,300x250,第一屏 */google_ad_slot = "3685991503";google_ad_width = 300;google_ad_height = 250;// -->用js将form表单同时提交到两个不同页面的方法: funct
多级联动菜单（js）
qq_59517599的博客
07-15 1509
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>多.
js实现二级联动菜单
03-11 1504
下面是一段js实现二级联动菜单的代码，供初学者使用。文件名：index.html,代码如下<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Co
C# MVC 使用LayUI实现下拉框二级联动的功能
08-19
C# MVC 使用LayUI实现下拉框二级联动的功能 C# MVC 中使用 LayUI 实现下拉框二级联动的功能是指在 Web 应用程序中使用 LayUI 库来实现下拉框的二级联动功能，即根据选择的部门来动态加载对应的角色信息。下拉框二级...
js 使用form表单select类实现级联菜单效果
12-10
form name=”form1″ method=”POST” action=”–WEBBOT-SELF–“> <select id=”select1″ onchange=”select1onchange()”> ”1″>1</option> ”2″>2</option> ”3″>3</option> ”4″>4</option> <...
js 实现省市区三级联动菜单效果
12-02
省市区三级联动</title> </head> <body> <form> <select id="province"> 请选择省份 </select> <select id="city"> 请选择城市 </select> <select id=...
Angular.JS实现无限级的联动菜单(使用demo)
10-20
在Angular.JS中实现无限级联动菜单是一种常见的需求，特别是在构建复杂的Web应用时，这种功能可以用于导航或筛选。本文将介绍如何通过Angular.JS创建这样的菜单系统，并提供几个具体的示例。 首先，无限级联动菜单...
JavaScript之AJAX实现二级联动菜单(jsp+js+servlet
m0_66789766的博客
04-12 1010
请选择大师作品 2.2、1.js文件源码如下： var xhr; //根据不同浏览器创建xhr对象的函数 function creatXHR () { if (typeof(XMLHttpRequest)!=“undefined”) { return new XMLHttpRequest(); //针对IE7及四大浏览器 }else if (typeof ActiveXObject !=“undefined”) { if (typeof arguments.callee..
js实现二级菜单联动
12-26
js实现的二级菜单联动。选择的是省市联动
三级级联菜单（JS+HTML)
01-21
自己在二级基础上修改的，亲测可用，欢迎下载！
js+css实现超简洁的二级下拉菜单效果代码
10-23
主要介绍了js+css实现超简洁的二级下拉菜单效果代码,通过非常简单的JavaScript遍历页面元素及动态设置样式达到二级下拉菜单的效果,具有一定参考借鉴价值,需要的朋友可以参考下
js实现二级菜单
05-31
js实现导航栏二级菜单，极丑，极简单，有详细的中文注释，主要是说明原理供自己备用，感兴趣者、初学者可下载，高手飘过。
简单实现js点击展开二级菜单功能
10-19
主要教大家简单实现js点击展开二级菜单功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
使用类的方法 实现菜单的级联效果 我行我素菜单管理系统
java_zuiweng的博客
11-27 6155
import java.util.Scanner; public class Menu { Scanner input = new Scanner(System.in); public void LoginMenu(){ System.out.println("\t欢迎使用我行我素购物管理系统\n"); System.out
java联系---实现菜单的级联效果
热门推荐
gengzhi1293443962的博客
09-09 1万+
import java.util.Scanner; public class Menu { public void showLoginMenu() { System.out.println("\n\t欢迎使用我行我素购物管理系统\n"); System.out.println("\t\t1.登录系统\n"); System.out.println("\t\t2.退出\n");
jQuery_显示和隐藏（二级表单）
weixin_34268310的博客
05-22 267
jQuery_显示和隐藏（下拉菜单） 设计： 　　1.设置每个li标签的name一样 　　2.下拉菜单的id是li的id+_items $(function () { showhide() }) /** * 1.鼠标移入显示，移除隐藏 */ function showhide() { $('[name=show_hide]').hover(fu...
html表单下拉多级菜单,js 使用form表单select类实现级联菜单效果
weixin_36474829的博客
06-21 616
用例如下：1234我建议要设定每个option的value值，来标示用户在选用时具体是哪一项。在javascript中使用document.getElementById("select1").value;或者form1.select1.value;则可得到所选的值是多少。使用onchange事件，触发条件是select的option值改变。使用级联菜单时建立两个select，他们的id分别是sel...
自定义django form表单,实现外键多级联动
最新发布
09-09
实现Django中自定义的表单多级联动，需要使用到`ModelForm`和JavaScript来实现。 首先，我们需要创建一个ModelForm，用于实现表单的自定义字段和验证规则。 ```python from django import forms from .models import ModelA, ModelB class MyForm(forms.ModelForm): class Meta: model = ModelA fields = '__all__' # 可根据实际需求选择需要的字段 def __init__(self, *args, **kwargs): super(MyForm, self).__init__(*args, **kwargs) self.fields['second_model'] = forms.ModelChoiceField(queryset=ModelB.objects.none()) if 'first_model' in self.data: try: first_model_id = int(self.data.get('first_model')) self.fields['second_model'].queryset = ModelB.objects.filter(first_model_id=first_model_id) except (ValueError, TypeError): pass elif self.instance.pk: self.fields['second_model'].queryset = self.instance.first_model.modelb_set.order_by('name') ``` 在上面的例子中，`ModelA`是第一个模型，`ModelB`是第二个模型。在`MyForm`类的初始化方法中，根据`first_model`字段的值动态更新`second_model`字段的queryset，实现了多级联动。 接下来，我们需要在模板中添加HTML和JavaScript来实现多级联动效果。 ```html <form method="POST" action=""> {% csrf_token %} {{ form.as_p }} <button type="submit">Submit</button> </form> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script> $(document).ready(function() { $('#id_first_model').change(function() { var url = $(this).attr('data-href'); var first_model_id = $(this).val(); $.ajax({ url: url, data: { 'first_model_id': first_model_id }, success: function(data) { $('#id_second_model').html(data); } }); }); }); </script> ``` 在上面的例子中，我们使用了jQuery来监听`first_model`字段的变化事件。当`first_model`字段的值发生改变时，执行AJAX请求，获取到对应`second_model`字段的选项，并更新页面上的`second_model`字段。 总结来说，我们通过自定义的表单类`MyForm`来实现外键的多级联动，然后通过JavaScript的AJAX请求和动态更新页面的选项来实现表单的多级联动效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值