城市联动功能

最新推荐文章于 2024-09-10 06:15:30 发布

伏案听雨眠

最新推荐文章于 2024-09-10 06:15:30 发布

阅读量132

点赞数

分类专栏：练习题文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/Chanyto/article/details/126122611

版权

练习题专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文详细介绍了JavaScript中表单事件和select、option元素的使用，包括获取和操作选项、创建与删除option，以及实现下拉列表的联动效果。通过示例代码展示了如何根据用户选择的省份动态加载对应城市，实现自动联想功能，强调了事件委托在解决此类问题中的应用。

摘要由CSDN通过智能技术生成

掌握：

本题需要熟练掌握表单事件的运用，select 以及 option 的知识内容，以下为知识点详解及代码：表单字段不包label
因为它只是增强交互的标签，通常来说我们把表单字段分为：

input
select
button
textarea

获取表单元素

document.getElementByld(id);
document.querySelector(“form”)；
document.forms[index]
document.forms.formld
document.formName

标志性属性(特殊属性)

disabled 禁用
readonly 只读
autofocus 自动获取焦点
checked 已选中(单选框/复选框)
selected 自动选中
multiple 下拉列表可以多选（按住shift）不常用

下拉

除了可以用selectorAll去进行获取所有option外，select.options
也可以获取到所有的option，要拿其中某一个，可以通过具体的下标去获取。不使用下标则得到的是一个数组。

    
    <option></option>
    <option></option>
    <option></option> </ select>

<script>
    sel.options </script>     ```

`selectedIndex` 获取点击后的option的下标，你点击的是某个opotion 就是某个option的下标

```js let i = sel.selectedIndex; ```

selectedOptions，是点击后获得的`HTMLCollection`并且只有一个元素，因此要获得点击的option就需要`selectedOptions[0]`

```html <body>
    <select name="" id="sel">
        <option value="">打球</option>
        <option value="">唱歌</option>
        <option value="">看书</option>
    </select>

    <script>
       	// 此处使用了创建事件监听器的方法来新建事件
        sel.addEventListener("change", function() {
            let selectedOptions = this.selectedOptions[0].innerText;
            console.log(selectedOptions); // 获取的是option的文本内容
         
            let selectedIndex = this.selectedIndex 
            console.log(selectedIndex); // 获取的是点击后的option下标
          
        })
    </script> </body> ```

获取选中的option身上的value

```html <select id= 'sel'>
    <option value= 'heihei'></option>
    <option></ option> 	<option></option>
     </ select>
     <script>
    sel.value; </script> ```

### 创建option

option的创建除了以往的 document.createElement(" option")，即：

```js let opt = documentElement('option'); ```

还有通过构造函数的方式创建,即：

```js let opt = new Option(text,value); ```

<span
style="color:red">注·通过上述的创建option的方法都需要在通过添加父节点的方法将option放进到select里</span>

### 删除option

- ### remove

通过使用remove的方法可以实现删除具体的某个option的值

```js ele.options.remove(index); ```

- ### 一次性删除所有的option

可以把父节点，即select的长度设置成0，则意味着移出了所有的option

```js ele.options.length = 0; ```

可以将父节点，即select下的元素标签设置成空字符串 `''` 则意味着所有的option都为空

```js ele.innerHTML = ``; ```

### 修改option

- 通过 `innerHTML` 的方法进行修改

```html <select id= 'sel'>
    <option value= 'heihei'></option>
    <option></ option> 	<option></option>     </ select>
     <script>
    sel.innerHTML = `<option>文本内容</option>`； </script> ```

- 通过 `ele.options[i].innerText` 的方法来实现修改具体的某一项option的值

```html <select id= 'sel'>
    <option value= 'heihei'></option>
    <option></ option> 	<option></option>     </ select>
     <script>
    sel.options.innertext = '文本内容'； </script> ```

- 通过 `ele.option.value` 给value重新赋值，可以实现修改value的值
- 通过 `ele.option.text` 给text重新赋值，可以实现修改text的值

需求：

1.实现下拉列表及其下拉一栏自动联想第二栏内容，例：点击第一栏中的某一项，自动联想第二栏的内容

2.利用表单事件实现

题干:

<body>
	<select name="" id="province"></select>
    <select name="" id="city"></select>
    
    <script>
        const cities = [
            { "name": "北京市", "city": ["朝阳区", "海淀区", "通州区", "房山区", "丰台区"] },
            { "name": "广东省", "city": ["东莞市", "广州市", "中山市", "深圳市"] },
            { "name": "山东省", "city": ["济南市", "青岛市", "临沂市", "济宁市", "菏泽市"] },
            { "name": "江苏省", "city": ["苏州市", "徐州市", "盐城市", "无锡市", "南京市"] },
            { "name": "河南省", "city": ["郑州市", "南阳市", "新乡市", "安阳市", "洛阳市"]}
        ];
	</script>
</body>

思路：

由题干可知有两个带有id的 select 下拉菜单的标签，一个 province 一个是 city 还有一个内联的js代码块，由一个数组成。

1.抛开单词的实意不谈，我们通读需求可知，实现下拉菜单的功能，select和option是相辅相成的，只要是出现了select，那么就会有option。所以我们可以确定，select应该是一个父级元素，而数组中的对象是由name和city两个部分组成的，所以这两部分的内容一定是作为select标签的文本内容的.

2.所以，为了实现需求，我们要将数组cities中的name作为option标签放进id为province的标签select中的，city亦然。

3.这个时候我们有解题方法大同小异，区别于在于数组的遍历方法，第一种是创建一个option，将数组中的值利用for循环遍历一一对应的作为文本内容添加到我们创建的option中，然后再将option作为子节点添加到父节点select中去，第二种则是利用map遍历。

4.这个时候我们虽然将数据渲染到了对应的元素上，但是两个父元素并没有联动，意思就是我点击了省份，城市不仅会有北京的城市还会有其他省份的城市。这显然是不对的，因为我们要的效果是点击某个省份，旁边的城市下拉菜单自动生成对应的城市，如果有其他省份的城市存在的话，就是有bug的。

5.这个时候我们理清思路，很明显，我要实现联想的功能，前提是我知道省份，然后再下拉菜单之后单击某个省份，我对应的城市的下拉菜单能够只显示和我单击的省份下的城市。所以我们不难看出，这里需要用到事件委托。

6.使用onclick或者onchange方法都不影响功能的实现，这里我们需要获取到的是option的下标，通过下标我们可以依照下标拿到数组中具体的对象，利用对象的属性拿到我们所需要的数据。

7.将数据渲染到城市下拉菜单中即可。

代码：

<body>
    
    <select name="" id="province"></select>
    <select name="" id="city"></select>
    <script>
        const cities = [
            { "name": "北京市", "city": ["朝阳区", "海淀区", "通州区", "房山区", "丰台区"] },
            { "name": "广东省", "city": ["东莞市", "广州市", "中山市", "深圳市"] },
            { "name": "山东省", "city": ["济南市", "青岛市", "临沂市", "济宁市", "菏泽市"] },
            { "name": "江苏省", "city": ["苏州市", "徐州市", "盐城市", "无锡市", "南京市"] },
            { "name": "河南省", "city": ["郑州市", "南阳市", "新乡市", "安阳市", "洛阳市"]}
        ];
       
        // 通过遍历拿到所有的省份
        for (let index = 0; index < cities.length; index++) {
            province.innerHTML += `<option>${cities[index].name}</option>`
        }
        // 渲染函数，通过具体option，渲染特定的city数据，当没有参数传入时默认为零
        function render(index = 0) {
            // 获取对象属性值
            let arr_cname = cities[index].city;
            // 通过map的方法遍历将属性值添加到option中
            city.innerHTML = arr_cname.map(item => `<option>${item}</option> `).join('');
        }
        render(); // 调用
        // 改变事件
        province.onchange = function () {
            let index = province.selectedIndex; // 获取用户点击option时的下标
            render(index);
        }
        
    </script>
</body>

伏案听雨眠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
城市联动功能

3.这个时候我们有解题方法大同小异，区别于在于数组的遍历方法，第一种是创建一个option，将数组中的值利用for循环遍历一一对应的作为文本内容添加到我们创建的option中，然后再将option作为子节点添加到父节点select中去，第二种则是利用map遍历。6.使用onclick或者onchange方法都不影响功能的实现，这里我们需要获取到的是option的下标，通过下标我们可以依照下标拿到数组中具体的对象，利用对象的属性拿到我们所需要的数据。//获取的是option的文本内容。...
复制链接

扫一扫

专栏目录