Jquery 连动下拉列表

小咪咪 2023-10-06 22:14 60阅读 0赞

#### 阅读目录 ####

*  预览
 *  源码

## 预览 ##

![在这里插入图片描述][118cd43517524ae082f550d185ae24ae.gif_pic_center]

## 源码 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>下拉列表</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(function (){
          
            var provinces=["黑龙江","吉林","辽宁"];
            var citys=[["哈尔滨","鹤岗","齐齐哈尔"],["四平","辽源","通化","吉林"],["沈阳","大连"]];
            var p=$("#province");
            for (var i=0;i<provinces.length;i++){
          
                var div=$("<option>");
                div.append(provinces[i]);
                p.append(div);
            }
            p.change(function (){
          
                $("#city").empty();
                var proid=-1;
                for (var i=0;i<provinces.length;i++){
          
                    if (this.value==provinces[i]){
          
                        proid=i;
                    }
                }
    
                for (var i=0;i<citys[proid].length;i++){
          
                    var div1=$("<option>");
                    div1.append(citys[proid][i]);
                    $("#city").append(div1);
                }
            })
    
        })
    </script>
    </head>
    <body>
    
    <div align="center">
        <select id="province" style="width: 100px">
            <option></option>
    
        </select>省
        <select id="city" style="width: 100px">
    
        </select>市
    </div>
    
    </body>
    </html>

[118cd43517524ae082f550d185ae24ae.gif_pic_center]: https://img-blog.csdnimg.cn/118cd43517524ae082f550d185ae24ae.gif#pic_center

发表评论取消回复

表情：

评论列表（有 0 条评论，60人围观）

还没有评论，来说两句吧...

相关阅读

相关 Jquery 实现下拉列表三级联动

需求: (1) 根据省、获得市、 (2) 通过市，再获得到县， (3) 每个下拉框数据都由一个数组组成; 效果：初始页面 ![201901151552241

朴灿烈づ我的快乐病毒、/ 2023年10月18日 13:46/ 0 赞/ 165 阅读

相关 Jquery 连动下拉列表

阅读目录预览源码预览 ![在这里插入图片描述][118cd43517524ae082f550d185ae24ae.gif_pic_center]

小咪咪/ 2023年10月06日 22:14/ 0 赞/ 61 阅读

相关 jquery创建下拉列表_使用jQuery创建Twitter样式的下拉列表

jquery创建下拉列表 ![Twitter Dropdown][] Twitter does some great stuff with JavaScript. What

爱被打了一巴掌/ 2023年02月22日 01:25/ 0 赞/ 60 阅读

相关 jquery操作select 下拉列表

(注意：此处用的是jquery1.4.1) var index = $('\ddlBrand option:selected').attr('index');//获取选中项的

港控/mmm°/ 2022年09月29日 15:56/ 0 赞/ 252 阅读

相关 jquery的ajax动态下拉列表

后台是返回一个json字符串前台用ajax接收然后把data拼接成select下拉列表 script <script type="text/javascri

电玩女神/ 2022年06月04日 03:37/ 0 赞/ 262 阅读

相关 ajax 下拉框连动选择省市县

效果如下，用了bootstrap的下拉组件 ![这里写图片描述][SouthEast] 在页面中首先隐藏市和县的div, 然后ajax自动请求一次数据获取省份，监听省份

ゝ一纸荒年。/ 2022年06月03日 02:58/ 0 赞/ 72 阅读

相关 jQuery 自定义下拉列表框

在上一篇《[单选框/复选框美化][Link 1]》中，使用到了关键先生 <label>，但是很不幸运，在下拉列表框(<select>)中，<label>并不能通过指向来展开选项

深碍√TFBOYSˉ_/ 2022年05月09日 12:03/ 0 赞/ 320 阅读

相关 JQuery下拉列表左右选择

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>下拉列

冷不防/ 2022年04月22日 05:56/ 0 赞/ 257 阅读

相关 jQuery完成下拉列表左右选择

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>下拉列

小鱼儿/ 2022年04月06日 08:20/ 0 赞/ 270 阅读

相关动态生成下拉列表（JQuery、EasyUI）

一、原生的select标签： <%@ page language="java" contentType="text/html; charset=UTF-8"

素颜马尾好姑娘i/ 2021年11月22日 12:40/ 0 赞/ 425 阅读