javascript实现的2级连动实例

最新推荐文章于 2024-08-11 18:40:36 发布
最新推荐文章于 2024-08-11 18:40:36 发布
阅读量376 收藏
点赞数
文章标签： javascript iterator integer list function null

<javascript语言部分>

<%

 List dqList=(List)request.getAttribute("dqList");
 List cityList=(List)request.getAttribute("cityList");

%>

<script type="text/JavaScript">

//----------------------------自定义initArea()构造函数
   function InitArea() {
      this.PID="";
      this.ID="";
      this.Name="";
   }

//----------------定义数组(全局变量),存储cityList.
    city=new Array();


    <%//java代码开始
     String name = null;
     Integer id=null;
     Integer area_Id=null;
     int t=0;
     Iterator iterator = cityList.iterator();

//-----------------------把cityList循环存入ctiy数组

//-------------------------------------------------循环开始
     while (iterator.hasNext()) {
          City bo = (City)iterator.next();
          area_Id=bo.getArea().getId();
          name =bo.getCityName();
          id=bo.getId();  
   %>//java代码结束

//----------生成一个自定义对象,把引用赋给ctiy

    city[<%=t%>]=new InitArea();

//---------------------------给新对象赋值,存入city
   
   city[<%=t%>].PID="<%=area_Id%>";
   city[<%=t%>].ID="<%=id%>";
   city[<%=t%>].Name="<%=name%>";
   <%t++;}%>
//--------------------------------------------------循环结束

//--------------------------------定义selectChanged()函数


   function selectChanged() {

   //----------------------获得选中dq的值
    var selectvalue = document.forms[0].elements["dq"].value;

   //-----------------------给cs的options长度初始化
    document.forms[0].elements["cs"].options.length = 0;

    //如果地区值为空,返回
    if (selectvalue =="") {
         return;
    }

   //取city的长度做为循环条件
    for(var t=0;t<city.length;t++){

      //它的pid值等于slectvalue值就增加一个option对象
       if(city[t].PID == selectvalue){
           var objOption1_1 = document.createElement("option");
           objOption1_1.text = city[t].Name;
           objOption1_1.value= city[t].ID;
           document.forms[0].elements["cs"].add(objOption1_1);
     }
    }
  } 
</script> 

 

<body部分>

<body οnlοad="selectChanged();">

<form  name="form1" action" method="post">

.....................................................................................

<td>* 地区：
       <select οnchange="selectChanged();" name="dq" >
        <option value="">不限</option>
        <%
          if(dqList!=null&&dqList.size()>0){
            for(int i=0;i<dqList.size();i++){
              area=(Area)dqList.get(i);
              if(!"".equals(areaId)&areaId.equals(String.valueOf(area.getId()))){
             %>
             <option value="<%=area.getId()%>" selected><%=area.getAreaName()%></option>
             <%}else{ %>
             <option value="<%=area.getId()%>"><%=area.getAreaName() %></option>
             <%}}} %>
             </select>
          </td>
      </tr>
      <tr>
          <td>* 城市：
             <select name="cs" id="cs" ></select>
         </td>
      </tr>

...................................................................................

</form>

</body>

 
danielzi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
利用JavaScript实现二级联动
qq_39155611的博客
05-26 965
利用JavaScript实现二级联动 要实现JavaScript二级联动效果，首先要确定需要哪些技术： 二维数组 for in循环 new Option(text,value,true,true) add(option,null) onchange() 表单事件 HTML代码： <!-- <input type="text" id="text"> --> 请选择省份： <select name="" id="provinces">
JS:二级联动（代码）
weixin_59519449的博客
10-09 441
整体代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> 省:<select id="pro"></select> 市:<select id="city"></select> <script type="
php js 动态联动,给你一个JS实现列表连动的例子-PHP教程,PHP应用
weixin_39593718的博客
03-21 100
function show_board(board_top,board){var select_index,select_id,select_name,i,j;select_index=board_top.selectedindex;select_id=board_top.options[select_index].value;form1.parent_id.value=select_id;for...
js实现二级联动
zhaojianyin
08-23 1323
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jstest2</title> <script type="text/javascript"> window.onload = function() { var ele1 = document.getElementById("provice");
javascript DOM编程实例(智播客学习)
01-19
二级连动下拉菜单（一级是省份，二级是城市，要求一级选中省份，二级城市对应出现） 步骤：1）基本框架（HTML）：两个复选框，而第二个复选框里面开始应该是没有选项的，注意第一个下拉框会作为事件源，通过 ...
ajaxpro省市区三级连动
04-28
此实例“ajaxpro省市区三级连动”利用了AJAX（Asynchronous JavaScript and XML）技术来实现这一功能。AJAX允许我们在不刷新整个页面的情况下与服务器进行异步通信，提升用户体验，使用户界面更加动态和响应迅速。 ...
AJAX 做3级连动
03-06
本篇将深入探讨如何利用AJAX实现三级联动效果，即在三个下拉菜单中，一个选项的选择会动态地改变下一个下拉菜单的内容，以此类推。 ### 1. AJAX基础 AJAX的核心是XMLHttpRequest对象，它允许JavaScript在后台与...
dojo处理三级连动
09-25
本篇文章将深入探讨如何使用Dojo来实现一个三级联动的简单实例。 首先，我们来理解什么是“三级联动”。在Web应用中，通常指的是三个下拉菜单或选择框，它们之间存在依赖关系。当用户在第一级选择一个选项时，第二...
省市二级连动下拉框（JS+XML）
11-20
本案例中，开发人员选择使用 **JavaScript (JS)** 和 **XML** 来实现省市二级联动下拉框功能。这种方式的优点是不需要服务器端的支持，只需要前端技术就可以完成，因此具有很好的灵活性和轻量性。 #### 三、XML文件...
select 多选框小例
terran_li2005的博客
02-06 100
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt;&lt;HTML&gt;&lt;HEAD&gt;&lt;TITLE&gt; New Document &lt;/TITLE&gt;&lt;META NAME="Generator" CONTENT="EditPlus"&
select.options.length
love398146779的专栏
05-24 699
function callback1(data){if(data != null )      {               var areaId = document.getElementById('areaId');         areaId.options.length=1;       for(var i=0 ;i&lt;data.length;i++)        {      ...
js 两级联动
qq_41997807的博客
05-09 938
&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;  &lt;title&gt;JS实现二级联动菜单&lt;/title&gt;&lt;/head&gt;&lt;body&gt;    &lt;form name="form1" method="post" action=""&gt;
Arco Design for Vue 3 - 快速上手指南与实战技巧
最新发布
qq_42072014的博客
08-11 280
如果你在使用 TypeScript 时遇到了类型定义问题，确保你安装了正确的类型包，并且版本与 Arco Design 的版本相匹配。Arco Design for Vue 3 是一个非常强大的 UI 框架，它不仅提供了丰富的组件和功能，还有完善的文档和支持。通过本文，你已经掌握了如何快速上手 Arco Design，并学会了一些实用的技巧来提升你的开发效率。希望这些经验能帮助你在 Vue 3 的开发过程中更进一步！
牛客JS题（三十四）监听对象
不起眼小菜菜的博客
08-10 343
注释很详细，直接上代码……
JavaScript日期与星期显示实例
"JavaScript实例集，这是一份包含多个JavaScript示例的集合，主要用于展示如何在网页中显示当前日期和星期。" JavaScript是一种广泛应用于网页开发的脚本语言，它主要负责网页的交互性和动态效果。在这个实例集中，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值