`

select级联操作(js)

 
阅读更多
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <title>级联操作</title>
 <meta http-equiv="pragma" content="no-cache">
 <meta http-equiv="cache-control" content="no-cache">
 <meta http-equiv="expires" content="0">    
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 <meta http-equiv="description" content="This is my page">
 <script type="text/javascript">
  var data={xz:["选择"],
    china:["北京","天津","上海","南京","深圳","澳门","香港"],
    usa:["纽约","华盛顿","旧金山","洛杉矶"],
    japan:["东京","福田","北海道","大阪"]
  }; //准备数据 
  function selectCity(){
   var sel=document.getElementById("country");
   var opt=sel.options[sel.selectedIndex];
   var cityArr=data[opt.value]; //通过国家的名字得到城市数组
   //把父select中得到的值赋给子select
   var city=document.getElementById("city");
   city.options.length=0; //将id为city的select的选项清空
   for(var i=0;i<cityArr.length;i++){
    var op=new Option(); //创建一个Option对象
    op.text=cityArr[i];
    city.options[i]=op;
   }
  }
 </script>
  </head>
  <body>
 国家:
 <select id="country" name="country" onchange="selectCity();">
  <option value="xz">请选择</option>
  <option value="china">中国</option>
  <option value="usa">美国</option>
  <option value="japan">日本</option>
 </select>
 城市:
 <select id="city" name="city">
  <option>请选择</option>
 </select>
  </body>
</html>

说明:简单实现选择国家,对应的城市select就提供相应的城市。

分享到:
评论

相关推荐

    select级联框 js json 全动态

    总结,"select级联框 js json 全动态"是一个利用jQuery和JSON数据实现的动态交互功能,它通过监听用户的选择,动态地生成和更新选择框的内容,为用户提供流畅的多级选择体验。在实际项目中,这样的功能可以大大增强...

    select级联下拉列表

    在网页设计中,"select级联下拉列表"是一种常见的交互元素,用于创建省市区选择、类别层级展示等场景。这种技术通常结合JavaScript(JS)、HTML5和jQuery库来实现,使得用户能够在多个下拉菜单之间进行联动选择,...

    select级联

    在网页开发中,"select级联"是一种常见的交互设计,主要用于实现下拉菜单之间的关联性。这种设计使得用户在一个下拉列表(select元素)中选择一个选项后,另一个相关的下拉列表的内容会根据前者的选中值动态更新。...

    asp简单的select级联菜单带数据库

    在“asp简单的select级联菜单带数据库”的场景中,我们主要关注的是如何利用ASP技术实现HTML中的&lt;select&gt;元素的级联效果,并且这些下拉菜单的数据来源于数据库。 首先,`dingdan.asp`可能是主页面,它包含用户界面...

    select2 省市区 级联 下拉菜单

    4. **初始化select2**:使用JavaScript(如jQuery或原生JS)来初始化select2,并设置初始数据和级联事件。 ```javascript $(document).ready(function() { var provinces = [/* 省市区数据 */]; // 初始化省份...

    javascript 下拉框 级联操作

    在本案例中,我们将深入探讨如何使用JavaScript实现下拉框的级联操作。 首先,我们需要理解HTML结构。通常,两个级联的下拉框会分别定义为`&lt;select&gt;`元素,并通过`id`属性来唯一标识它们。例如: ```html &lt;select ...

    select级联二级菜单

    总的来说,"select级联二级菜单"涉及HTML结构的设计、JavaScript动态操作和可能的数据异步加载。通过学习提供的示例,你可以深入理解如何利用这些技术来创建交互式的多级选择菜单,这对于前端开发是非常实用的技能。...

    struts实现select级联

    以上就是使用Struts2实现select级联选择的基本流程。不连接数据库的情况,数据可以直接在Action中初始化。在实际项目中,数据通常从数据库中获取,因此级联Action需要根据用户选择的省份查询数据库并返回相应城市的...

    select_multiple三级分类级联

    在网页设计和开发中,"select_multiple三级分类级联"是一种常见的交互元素,主要用于实现多级选择的功能。这种技术常用于商品分类、地区选择、层级菜单等场景,以提供用户友好的选择体验。例如,在淘宝发布商品时,...

    JSP Ajax省市县Select级联菜单.rar

    【JSP Ajax省市县Select级联菜单】是一个典型的前端与后端交互的示例,它在Web应用中常用于实现动态、无刷新的选择区域(省、市、县)功能。这个压缩包包含了一个完整的解决方案,使得用户在选择省份时,对应的市区...

    Vue.js 2.0中select级联下拉框实例

    在Vue.js 2.0版本中,select级联下拉框是前端界面中常见的一种交互方式,它能够根据上一级选择的值来动态更新下一级的选项内容。本文将介绍如何在Vue.js 2.0中创建并实现动态级联select的功能,并讨论单选和多选在...

    json+select 下拉框级联菜鸟

    在JSON+Select级联应用中,通常会用到以下关键技术: 1. **JSON数据格式**:JSON是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。在级联下拉框中,JSON常用来存储级联关系的数据,如省市...

    Js Select下拉框级联菜单 5级列表菜单.rar

    Js Select下拉框级联菜单,一共支持5级联动,相信够用了,这种菜单不用多介绍吧,后一级的值与前一级是父、子关系,该示例还演示了动态添加菜单、减少菜单的功能,还有显示/不显示空值的功能,如演示截图所示。

    JS实现级联菜单 三级级联

    用js实现三级级联,&lt;select id="s1" onChange="changeSelect2('s1','s2')"&gt; 请选择&lt;/option&gt; &lt;option value="A" &gt;A&lt;/option&gt; &lt;option value="B"&gt;B&lt;/option&gt; &lt;/select&gt; &lt;select id="s2" onChange="changeSelect3...

    AngularJS级联操作

    在AngularJS中,级联操作通常涉及到数据的深度绑定和组件间的交互,特别是在构建复杂的用户界面时。这个概念尤其有用,比如在实现下拉菜单、树形结构或者联动选择器等场景。在这个“AngularJS两级”主题中,我们将...

    基于JQuery实现的Select级联

    在实现Select级联的过程中,JQuery主要负责监听Select元素的改变事件并执行相应的操作。 在给出的代码片段中,我们可以看到以下关键部分: 1. `$("#precinct").change()`:这部分代码是为ID为`precinct`的Select...

    省市,年月日级联(JS)

    这种级联效果通常使用JavaScript来完成,因为它提供了动态交互和实时更新的能力。接下来,我们将深入探讨如何利用JavaScript来实现省市、年月级联的功能。 一、省市级联 1. 数据准备:首先,你需要一个包含所有...

    AngularJS实现三级级联下拉选择框

    在本文中,我们将深入探讨如何使用AngularJS实现三级级联下拉选择框。AngularJS,一个由Google维护的JavaScript框架,被广泛用于构建单页应用(SPA),它提供了丰富的功能来处理复杂的前端交互,包括数据绑定、依赖...

    cascaderjs级联选择器

    在JavaScript中,我们可以使用原生DOM操作、jQuery库或者其他前端框架(如React、Vue或Angular)来实现级联选择器。这里我们以原生JS为例,简要介绍其基本实现步骤: 1. **创建HTML结构**:首先,我们需要创建一个...

Global site tag (gtag.js) - Google Analytics