webday04-jQuery-二级联动下拉框

最新推荐文章于 2022-03-30 18:52:06 发布
最新推荐文章于 2022-03-30 18:52:06 发布
阅读量132 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47407295/article/details/108229773
版权

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>二级联动下拉框</title>
<!--引入jquery的js库-->
<script src="js/jquery-1.4.2.js"></script>
<script>
    var data = {
        "北京市": ["海淀区","朝阳区","丰台区"],
        "河北省": ["石家庄","唐山","秦皇岛"],
        "辽宁省": ["沈阳","大连","鞍山"],
        "山东省": ["青岛","济南","烟台"]
    }    
    /* --通过jQuery实现二级联动下拉框 -- */
    function selectCity(thisobj){    
        //获取省份
        var prov=$(thisobj).val()
        //获取城市
        var cities=data[prov]
        //清空之前的数据
        $("#city").html("<option>--选择城市--</option>")
        //将城市填充到第二个下拉框中
        for(var i=0;i<cities.length;i++){
            $("#city").append("<option>"+cities[i]+"</option>")
        }
    }    
</script>
</head>
<body>    
    <select name="country" οnchange="getCountry()"  >
        <option value="none">--选择国家--</option>
        <option value="中国">中国</option>
        <option value="美国">美国</option>
        <option value="日本">日本</option>
    </select>
    <br><br>
    <hr/>
    <br>
    <div id="seleDiv">
        <select id="province" οnchange="selectCity(this)">
            <option>--选择省市--</option>
            <option>北京市</option>
            <option>河北省</option>
            <option>辽宁省</option>
            <option>山东省</option>
        </select>
        <span id="citySpan">
            <select id="city">
                <option>--选择城市--</option>
            </select>
        </span>
    </div>
</body>
</html>

Victoria446704822
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
移动webday06.zip
12-21
欢迎来到我们的WEB前端学习视频！在这个视频系列中，我们将带你深入了解WEB前端开发的基础知识和实践技巧。 这个视频系列适合那些对于网页设计和开发有兴趣的初学者和入门者。无论你是想要成为一名专业的前端工程师...
前端——【JS】——用JS实现全国城市二级联动下拉框
奔跑的狮子
05-19 3407
预览图片 项目说明 点击省的下拉框，可以出现省份，选择省后，出现对应的市。博主设置了默认选择省份为“江苏省”。下面有代码，可以根据数据库获取的省市信息进行设置默认值，方便一些。 实现代码 <html> <head> <title>hello</title> <script type="text/javascript" src="/js/jquery.min.js"></script> <script t
Web前端开发实战1：二级下拉式菜单之CSS实现
diandingyin9417的博客
08-01 150
二级下拉式菜单在各大学校站点。电商类站点。新闻类站点等大型？站点非经常见，那么它的实现原理是什么呢？ 学习了Web前端开发的知识后，我们是能够实现这种功能的。复杂的都是从基础效果上加入做出来的。原理和流程 还是一样的，今天開始做一些简单的二级下拉式菜单。 横向一级菜单我们见到的非常多。例如以下图所看到的是： 二级下拉菜单图...
JavaScript实现二级下拉菜单联动
weixin_39006917的博客
05-15 2142
实现效果 选择相应的省份，二级菜单默认显示省会城市，同时可以选择其他城市。 源码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> /** * 实现二级菜单级联 */ var prov
html两个下拉列表省市关联,基于javascript实现全国省市二级联动下拉选择菜单
weixin_39552874的博客
06-04 753
本文实例讲述了js实现全国省市二级联动下拉选择菜单，分享给大家供大家参考。具体如下：效果图：具体代码：无标题文档//好像不是这样子var arr_province = ["请选择省/城市","北京市","上海市","天津市","重庆市","深圳市","广东省","河南省"];var arr_city = [["请选择城市/地区"],["东城区","西城区","朝阳区","宣武区","昌平区","大...
二级联动菜单实现(比如选择地区之后后面的城市下拉框出现相对应的城市)
u011004598的专栏
06-27 697
[code="js"] var req; window.onload=function(){ } function Change_Select() { var zhi=document.getElementById('province')...
移动webday05.zip
12-21
欢迎来到我们的WEB前端学习视频！在这个视频系列中，我们将带你深入了解WEB前端开发的基础知识和实践技巧。 这个视频系列适合那些对于网页设计和开发有兴趣的初学者和入门者。无论你是想要成为一名专业的前端工程师...
移动webday03.zip
12-21
欢迎来到我们的WEB前端学习视频！在这个视频系列中，我们将带你深入了解WEB前端开发的基础知识和实践技巧。 这个视频系列适合那些对于网页设计和开发有兴趣的初学者和入门者。无论你是想要成为一名专业的前端工程师...
移动webday02.zip
12-21
欢迎来到我们的WEB前端学习视频！在这个视频系列中，我们将带你深入了解WEB前端开发的基础知识和实践技巧。 这个视频系列适合那些对于网页设计和开发有兴趣的初学者和入门者。无论你是想要成为一名专业的前端工程师...
二级下拉列表联动 select 网页 html5
小西瓜吖的博客
03-30 1957
学院、专业，二级联动的下拉列表
简单的下拉框二级联动
风清扬的博客
08-30 4791
受理状态：                                --请选择-- -->                             全部                             待处理                             已处理                                        
webday04-DOM-二级联动下拉框
weixin_47407295的博客
08-24 143
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <title>二级联动下拉框</title> <script> var data={ "北京市":["海淀区","朝...
实现简单二级联动下拉框
MorningLight_LQ的博客
05-17 2148
介绍与原理：二级联动下拉框又叫做联动菜单，这是一个比较常见功能，在网上买东西填写地址的时候，还有一些个人信息的时候都有见到。原理就是当你选择好第一个下拉框的时候就会触发一个事件将第二个下拉框的内容改变称为与之相对应的内容，二级联动，以及更多的多级联动的原理都是一样，代码量会更多，但原理一样。 解析：要实现这个小功能我这里用到了jQuery里的click单击事件，还有each遍历函数，源代码在文末，看起来挺多的，但要用到的知识点却不多，认真看你会发现大部分都是类似的 在实现这个功能前用each遍历函.
Web多级联动下拉框（从数据库中获取数据，MVC模式,使用的是tomcat）
weixin_44255794的博客
06-26 1596
一、文件位置 java代码的位置 二、先编写一个jsp页面用来跳转到多级下拉框的jsp页面 随便编一个就行了,这里就叫index.jsp 1.index.jsp <%@ page language=“java” pageEncoding=“UTF-8”%> <%@ page contentType=“text/html;charset=UTF-8” import=“edu.m...
html中的二级联动与获取下拉框的值
热门推荐
weixin_43987277的博客
06-14 1万+
二级联动 1.普通的下拉框 水果： <select> <option>香蕉</option> <option>苹果</option> <option>西瓜</option> <option selected="selected">草...
基于ssm的毕业论文管理系统设计与实现.docx
09-09
基于ssm的毕业论文管理系统设计与实现.docx
SortableTableView：Android 表格视图库（0积分下载）
最新发布
09-09
在 Android 应用开发中，提供用户交云和数据展示的功能是非常重要的。SortableTableView 是一个开源的 Android 库，它提供了一个简单的 TableView 组件以及一个更高级的可排序 TableView，允许开发者实现复杂的表格视图和数据排序功能。 SortableTableView 简介 SortableTableView 是由 ISchwarz23 开发的一个 Android 库，它旨在简化表格视图的创建和数据排序的过程。这个库提供了丰富的定制选项，使得开发者可以根据自己的需求定制表格的外观和行为。 功能特点 简单的 TableView：提供基础的表格视图，用于展示静态数据。 可排序的 TableView：支持触摸滑动进行数据排序，提供更流畅的用户体验。 高度可定制：允许开发者自定义表格的布局、样式和行为。 灵活的数据处理：支持各种数据源，易于与应用的数据模型集成。
永磁同步电机的双环以及三环控制仿真模型以及参考资料
09-09
永磁同步电机的双环以及三环控制仿真模型以及参考资料
seafile配置webday
06-03
好的，以下是配置 Seafile WebDAV 的步骤： 1. 首先，确保你已经在 Seafile 中启用了 WebDAV。在 Seafile 的配置文件 seahub_settings.py 中，找到并确保以下代码行没有注释掉： ``` ENABLE_WEBDAV = True ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值