掌握:
本题需要熟练掌握表单事件的运用,
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>