javascript实现下拉列框联动

最新推荐文章于 2021-01-14 03:52:55 发布
最新推荐文章于 2021-01-14 03:52:55 发布
阅读量735 收藏
点赞数
分类专栏： J2EE-XML 文章标签： javascript function generator html button input
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yurenjia/article/details/1660802
版权

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

 

 
<script language = "JavaScript">
var onecount2;
onecount2=0;
subcat2 = new Array();

//subcat2[<%=count2%>] = new Array("<%= trim(rs2("villagename"))%>","<%= trim(rs2("districtid"))%>","<%= trim(rs2("villageid"))%>");

subcat2[0]=new Array("青岛市","1");
subcat2[1]=new Array("济南市","1");


subcat2[2]=new Array("大连市","2");
subcat2[3]=new Array("丹东市","2");


function changelocation(villageid)
{
 document.myform.b.length = 0;
 
 var villageid=villageid;
 var j;
 document.myform.b.options[0] = new Option('==所选地区的县区==','');
 for (j=0;j <subcat2.length; j++)
 {
  if (subcat2[j][1] == villageid)
  {
   document.myform.b.options[document.myform.b.length] = new Option(subcat2[j][0], subcat2[j][1]);
  }
 }
}

function bb2_onclick(){
 var arr = new Array(new Array("names","z1","z2","z3"), new Array("ages",12,13,14));
 for(var i=0; i<arr.length; i++)
 {
  for(var j=0; j<arr[i].length; j++)
  {
   alert(arr[i][j]) ;
  }
 }
}

</script>

<BODY>
<form id='myform' name='myform'>
 <input type='button' οnclick='bb2_onclick()' value='xxxx'>
 <select id='a' name='a' οnchange='changelocation(document.myform.a.options[document.myform.a.selectedIndex].value)'>
  <option value="0">==所选地区的省份==</option>
  <option value="1">山东省</option>
  <option value="2">辽宁省</option>
  
 </select>
 <select id='b' name='b' >
  <option value=0>==所选地区的县区==</option>
  
 </select>
</from>
 

</BODY>
</HTML>
<script language='javascript'>


 function selectCity()
 {
  
  //var   obj=document.getElementById("b");  
  
  for(var   k=0;k<b.length;k++)
  {    
               b.options.remove(b[k]);      //删除所有b下拉列表框中的内容
        }  
  if (document.all("a").value=="1")
  {
   b.remove(0);  
   b.options[b.options.length]   =   new   Option('济南市',  0);  
   b.options[b.options.length]   =   new   Option('青岛市',  1);  
  }
  if (document.all("a").value=="2")
  {
   b.remove(0);
   b.options[b.options.length]   =   new   Option('大连市',  0); 
   b.options[b.options.length]   =   new   Option('丹东市',  1);
  }
  }

</script>
 

yurenjia
关注
专栏目录
JS+HTML简单实现表单二级联动效果
sanmu_1的博客
08-26 6340
表单选择栏二级联动 前言:表单的二级联动不可谓不重要,根据第一个选择栏的内容更改下一个选择栏的整体内容在一些场景下是必要的,所以今天以省市为例子利用JS+HTML实现简单的二级联动效果,仅做参考。   首先我们思考一下二级表单的产生都需要什么条件 以前一个选择栏的内容作为展现下一个选择栏的内容的标识,首先第一个选择栏的内容是一部分数据,下一个选择栏的内容是另一部分数据,并且第一部分数据应该...
javascript实现下拉条联动_js实现下拉框联动
weixin_29191669的博客
01-14 1255
今天学习了如何用js实现下拉框的联动，下拉框联动主要指的是当一个下拉框的内容改变时另一个下拉框的内容也会相应的发生改变。比如，我么有时在注册时会需要添加籍贯，当我们选择相应的省份之后，后面的市区也会相应的发生改变，这就是联动。下面是我实现此功能的代码，是通过视频学习之后自己做出相应改变之后写出的代码：Insert title herefunction fn(){var select=documen...
JavaScript 下拉框联动 案例
刘伟佳的博客
04-18 6252
功能描述 页面上有两个下拉框，左边显示国家，右边显示城市，左边发生变化的时候，右边下拉选择内容同时发生变化，实现联动效果。 分析 HTML页面<select id="country" style="width: 100px;" onchange="add1(this.value);"> <option value="0">--请选择--</option> ...
JavaScript 自定义下拉列表
司马懿的西山居
12-14 4864
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; &lt;style&gt; :root { --a
javascript实现下拉条联动_最简单js代码实现select二级联动下拉菜单
weixin_33168937的博客
01-14 867
编程之家收集整理的这篇文章主要介绍了最简单js代码实现select二级联动下拉菜单，编程之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。本文实例为大家分享了js实现select二级联动下拉菜单，供大家参考，具体内容如下String path = request.getContextPath();String basePath = request.getScheme()+"://"+requ...
JS联动下拉框
BEHINDLENS
04-14 2237
   JS联动下拉框          /*  **    ==================================================================================================  **    类名：CLASS_LIANDONG_YAO  **    功能：多级连动菜单  **    **    作者：YAODAYIZI
JS实现下拉列表联动
你只管努力，
12-08 1781
1. 江西福建1//创建对象，数据，值，文本function obj(aData,aValue,aText){ this.Data=aData; this.Value=aValue; this.Text=aText;}//设置选项数据数组，可以添加多个参数为"源地址,选择值，选择文本"var Set_data=new Array( new obj('江西','南昌','南昌'),
HTML二级联动下拉列表框的实现,如选择 省,市.zip
01-13
总的来说，HTML二级联动下拉列表框的实现涉及HTML、JavaScript以及数据管理，通过监听用户交互，动态更新页面内容，为用户提供更便捷、个性化的操作体验。这种技术在网页表单、地图选择等场景中广泛使用。
Bootstrap实现下拉菜单多级联动
08-28
Bootstrap 实现下拉菜单多级联动 Bootstrap 是一个非常流行的前端框架，它提供了许多实用的组件和工具，使得开发者可以快速构建漂亮的网页。今天，我们将讨论如何使用 Bootstrap 实现下拉菜单多级联动。 在 ...
基于javascript实现全国省市二级联动下拉选择菜单
10-22
总之，本实例通过JavaScript实现了在网页表单中动态更新省市下拉列表的内容，通过联动机制大大提高了用户体验。这一功能不仅适用于省市选择，也可以扩展到任何需要通过选择一个选项来更新另一个选项的场景中。通过...
javascript实现多级联动下拉菜单的方法
10-24
实现多级联动下拉菜单可以使用多种前端技术，本文主要探讨如何使用JavaScript来实现这一功能。 首先，要实现多级联动下拉菜单，我们需要定义一些基础数据结构。在示例中，定义了两个数组，`arrItems1` 和 `...
jQuery实现联动下拉列表查询框
10-20
本文主要介绍如何使用jQuery来实现这种联动下拉列表查询框。首先，我们使用jQuery库来简化DOM操作和事件处理。在文档加载完毕时，我们使用$(function(){...})来确保DOM完全加载后执行代码。在这个函数中，首先定义了...
php+mysql+javascript实现二级联动下拉框
邵奣晟的博客
11-01 6544
本例实现的内容是：一级下拉框是选择公司名的首字母，二级内容是首字母对应的所有公司。首先新建一个数据库名叫useradmin，创建两个数据表名叫com_charter 和company。com_charter存放的是首字母，有两个字段Charter_id 和charter，这里我是手动输入的数据，分别是1到26和A到Z，为了防止有数字开头的公司名，加了一个数据27 和‘123’company存放的是
用JS实现下拉选单的联动
页面无法显示_(:з」∠)__
04-05 2299
需求：用JS实现一个下拉选单，要求在选中“地区”选单中相应的地区时，自动在“国家”选单中 出现相应的国家。 联动菜单 地区： 请选择 亚洲 欧洲 非洲 国家： 请选择 select.js //假设接收到服务器传来的参数 var data = [ ["中国","朝
三级连动JS数据库查询代码整理
xqf222的专栏
03-04 2414
数据库表设计字段ClassID,ClassName,ClassType,ParentClassIDClassID类别IDClassName类别名称ClassType=1 顶级分类ClassType=2一级分类ClassType=3二级分类ParentClassID父类ClassID，顶类的父类默认为0脚本代码sql = "select * from Bs_ProductClass wher
js实现表单联动
konglei1996的博客
04-07 3248
最近做的一个小demo，原生js实现表单联动。演示地址：表单联动 我的github地址：源码地址，友情Star一下，谢谢实现效果如图： 这里我只记录一下核心代码思想。首先页面代码如下： 声明一个变量存放二级表单的内容 下面就是实现联动效果的核心代码 其中说下selectedIndex.属性可设置或返回下拉列表中被选选项的索引号。在这里，area是一级表单，如果选中该表单的某一个选择
设置下拉列表框的javascript方式进行实现
wutong7251113的博客
06-20 858
script type="text/javascript"> function displaySubMenu(li) { var subMenu = li.getElementsByTagName("ul")[0]; subMenu.style.display = "block"; } fun
jsp实现FTP上下载文件---直接将文件下载到本地硬盘
于仁嘉的博客
05-29 6048
此功能是下接将FTP上的文件下载到本地硬盘指定位置，没有能过各种下载软件，对于下载软件的做法实验过多次，存在中文名称的文件不能下载的问题， 而且在TOMCAT下可以下载英文名称的文件，在WEBLOGIC下英文名称的文件下载后，无法使用，只有部分格式的可以用，如RAR.JPG等，对于中文名称的也无法下载，GOOGLE了N次最终没有解决，只知道是文件名编码格式问题，还望朋友多多指教，小弟感激不尽。
jsp如何下载FTP上的文件---ftp协议方式
于仁嘉的博客
05-29 4933
本人是jsp初学者，费尽好大周折终于实现JSP如何从FTP上下载文件 ，现和大家分享一下，有不对之处请指教。一、创建java类：package ftp;import java.io.BufferedReader;import java.io.DataInputStream;import java.io.DataOutputStream;import java.io.File;impor
JavaScript实现下拉菜单联动及详细解析
"本文将详细解释如何在JavaScript中实现下拉联动效果，通过JSP页面中的元素和onchange()事件，结合AJAX技术动态更新第二个下拉列表。" 在网页交互中，下拉联动是一种常见的功能，它允许用户在选择一个下拉列表的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值