html中的二级联动与获取下拉框的值

最新推荐文章于 2025-04-24 09:24:19 发布

萌新贤的日常

最新推荐文章于 2025-04-24 09:24:19 发布

阅读量1.4w

点赞数 13

分类专栏：前端页面

本文链接：https://blog.youkuaiyun.com/weixin_43987277/article/details/92002847

版权

本文介绍了HTML中的二级联动效果实现，通过代码展示了如何创建二级联动下拉框，并详细讲解了如何使用JavaScript和jQuery获取下拉框选定的值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

二级联动和获取对应的值

1.普通的下拉框

水果：
    <select>
        <option>香蕉</option>
        <option>苹果</option>
        <option>西瓜</option>
        <option selected="selected">草莓</option> <!--代表选中这个-->
    </select>

显示结果如下：（默认会选中草莓）
在这里插入图片描述

2.二级联动

话不多说，直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二级级联查询</title>
</head>
<body>
    <select id="first" onChange="nextChange()">
        <option selected="selected"></option>
        <option>湛江</option>
        <option>深圳</option>