js三级联动（面向对象）

最新推荐文章于 2022-09-24 01:00:00 发布

致可乐

最新推荐文章于 2022-09-24 01:00:00 发布

阅读量481

点赞数

分类专栏：案例

本文链接：https://blog.youkuaiyun.com/ling_xy/article/details/118879827

版权

这篇博客主要介绍了JavaScript中如何实现三级联动效果，通过Option对象创建HTML表单下拉列表的选项，并利用Option()构造函数和appendChild()方法动态添加选项，探讨了相关DOM操作。

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

Option 对象：

Option 对象代表 HTML 表单中下拉列表中的一个选项。在 HTML 表单中标签每出现一次，一个 Option 对象就会被创建。


var newOption = new Option("Option text","Option value");
selectbox.appendChild(newOption);

new Option：

作用：用于创建一个新的选项
Option()构造函数接受两个参数：文本(text)和值(value);第二个参数可选。
这个构造函数会创建一个Object的实例，但是兼容DOM的浏览器会返回一个<option>元素。我们可以使用appendChild()将新的选项加到选择框中

ele.options.length --某个下拉框的选项数量

ele.options.length=1;  //使某个下拉框恢复只有默认值

在这里插入图片描述

代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
   
            width: 50%;
            margin: 60px auto;
        }
        li{
   
            list-style: none;
        }
        select{
   
            width: 70px;
            height: 25px;
            margin-right: 25px;
        }
        span{
   
            font-weight: bold;
            margin-right: 20px;
        }
    </style>
</head>
<body>
<ul>
    <li class="ad"><span>地址：</span>
        省：<select name="" id="province">
            <option value="-1" selected>请选