JS——表单操作及select多级联动下拉列表
一、获取表单元素
1、获取页面所有表单元素：document.forms
使用document.forms返回的是一个HTMLCollection数组，数组的元素是form，有多少个form就有多少个元素，每个元素是一个类数组，其中包含了当前表单中的所有元素及其对应的属性。
<form>
<input type="text" />
<input type="password" />
<input type="button" />
<input type="date" />
</form>
<script type="text/javascript">
let formAll = document.forms;
console.log(formAll);
//HTMLCollection数组,数组中有一个form,form中包含了所有的写的标签及其属性
</script>
2、通过获取节点方式获取表单元素：通过js获取节点的标准方法比如document.getElementById、document.getElementsByClassName等
<form>
<input type="text" id="text" />
<input type="password" class="pwd" />
<input type="button" />
<input type="date" />
</form>
<script type="text/javascript">
let text = document.getElementById('text');
let pwd = document.getElementsByClassName('pwd')[0];
let input = document.querySelectorAll('input');
</script>
注意： 在使用document.querySelector方法获取表单元素时，如果不是通过id、class、元素关系等获取，而是直接通过元素的type属性来获取时，要指明type属性值：
<input type="radio" />
<input type="checkbox" />
<script type="text/javascript">
let radio = document.querySelector("input[type='radio']");
let checkbox = document.querySelector("input[type='checkbox']");
</script>
二、表单及表单元素的属性
1、表单的方法：
| 方法 | 说明 |
|---|---|
| submit() | 表单提交 |
| reset() | 表单重置 |
<form >
<input type="text" />
</form>
<script type="text/javascript">
let form = document.querySelector('form');
let input = document.querySelector('input');
form.submit();//提交表单
form.reset();//重置表单
</script>
2、表单中元素属性操作：
| 属性 | 说明 |
|---|---|
| type | 可读可写，表示表单元素的类型，可以动态更改类型 |
| form | 只读属性，包含了该元素的form表单对象，不存在时返回null |
| name | 可读可写，表示元素的名称 |
| value | 可读可写，获取或设置表单元素的值 |
<form >
<input type="text" name = "set" value="111"/>
</form>
<script type="text/javascript">
let input = document.querySelector('input');
console.log(input.type);//text
input.type = 'password';//将input框改为密码框
console.log(input.form);
//查看input元素是否有form包裹，有返回整个表单，没有返回null
console.log(input.name);//获取input元素的name属性值
input.name = 'settime';//更改input元素的name属性值
console.log(input.value);//获取input元素的value属性值
input.value = '2222';//更改input元素的value属性值
</script>
对于radio和checkbox：
-
radio和checkbox有一个checked属性，将checked设置值为’checked’，会让单选框或多选框选中
-
或者在设置checked属性值时设置true或false，true表示选中，false代表不选中
<input type="radio" />
<input type="checkbox" />
<script type="text/javascript">
let radio = document.querySelector("input[type='radio']");
let checkbox = document.querySelector("input[type='checkbox']");
radio.checked = 'checked';
checkbox.checked = 'checked';
radio.checked = true;
checkbox.checked = true
</script>
三、表单元素事件处理
表单事件有两种：
-
提交submit
-
重置reset
<form>
用户：<input type="text" class="text" />
密码：<input type="password" class="pwd" />
<input type="submit" value="提交" class="submit"/>
<input type="reset" value="重置" class="reset"/>
</form>
<script type="text/javascript">
let form = document.querySelector('form');
let btnSubmit = document.getElementsByClassName('submit')[0];
let btnReset = document.getElementsByClassName('reset')[0];
let form = document.querySelector('form');
btnSubmit.onclick = function(){
form.onsubmit = function(){
console.log('提交');
}
}
btnReset.onclick = function(){
form.onreset = function(){
console.log('重置');
}
}
</script>
四、使用select制作多级联动下拉列表
首先了解一下select的属性和js可以操作select的方法和属性：
1、select自身的属性：
-
multiple: 设置select为多选
-
size: 当设置了multiple属性，一定要在设置了multiple属性后使用，通过size可以设置select固定可见行数；
-
disabled: 将select中某个option设置为不可选中状态；
-
name: 表单传输过程中的key值；
-
form: 指定select与表单关联的元素（id相同，一般使用较少，id一般是唯一的）， 可以使得表单传输项位于DOM任意位置，而非一定要是表单元素的子元素
2、js操作select：
（1） select节点.options：
-
返回其所有option选项，类数组的HTMLOptionsCollection，
-
可通过selectNode[index]访问option元素
（2）select节点.selectedIndex：
-
可读可写，被选中的选项索引，下边从0开始
-
通过修改selectedIndex的值设置默认选中选项
（3）select节点.value：得到选中的option值
（4）option节点.text：得到选项的文本信息，也就是用户看到的选项文字
（5）option节点.value：得到的是选项的值，和SELECT选中的值有区别
（6）可以通过节点操作对select的option进行增删查改操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="#">
<select class="province">
<option value ="">--请选择省份--</option>
</select>
</form>
<script type="text/javascript">
let menu = [
{
name: "四川省",
pid: 51,
city: [
{
name: "成都市",
cid: 5101
},
{
name: "绵阳",
cid: 5107
},
{
name: "宜宾",
cid: 5115
},
{
name: "广安",
cid: 5116,
ciyer:[
{
name: "华蓥市",
cyid: 51161
},
{
name: "邻水县",
cyid: 51162
},
{
name: "岳池县",
cyid: 51163
},
{
name: "武胜县",
cyid: 51164
}
]
},
{
name: "自贡",
cid: 5103
}
]
},
{
name: "云南省",
pid: 53,
city: [
{
name: "昆明",
cid: 5301
},
{
name: "玉溪",
cid: 5302
},
{
name: "大理",
cid: 5329
},
{
name: "丽江",
cid: 5304
},
{
name: "腾冲",
cid: 5305
},
{
name: "文山",
cid: 5306
}
]
},
{
name: "重庆市",
pid: 50,
city: [
{
name: "渝中区",
cid: 5001
}
]
},
{
name: "浙江省",
pid: 32,
city: [
{
name: "杭州市",
cid: 3201
}
]
}
]
let form = document.forms[0];
let select = document.querySelector(".province");
// 依次添加省份
for(let i = 0; i < menu.length; i++) {
select.innerHTML += '<option value = ' + menu[i].pid +'>' + menu[i].name + '</option>';
// select.innerHTML += `<option value="${menu[i].pid}">${menu[i].name}</option>`;
}
let newSelect1 = document.createElement("select");
console.log(newSelect1)
select.addEventListener("change", function(e) {
if(e.target.value == "") {
document.forms[0].removeChild(newSelect1)
}
// 每一次添加新的省份城市时,都要清空newSelect中设置的市
newSelect1.innerHTML = "";
for(let i = 0; i < menu.length; i++) {
if(e.target.value == menu[i].pid) {
let city = menu[i].city;
for(let j = 0; j < city.length; j++) {
let option = document.createElement("option");
option.innerHTML = city[j].name;
option.value = city[j].cid;
newSelect1.appendChild(option);
}
document.forms[0].appendChild(newSelect1);
}
}
})
let newSelect2 = document.createElement('select');
newSelect1.addEventListener("change", function(e) {
if(e.target.value == "") {
document.forms[0].removeChild(newSelect2)
}
// 每一次添加新的省份城市时,都要清空newSelect中设置的市
newSelect2.innerHTML = "";
for(let i = 0; i < menu.length; i++) {
for(let j = 0; j < menu[i].city.length; j++){
if(e.target.value == menu[i].city[j].cid) {
let city = menu[i].city[j].ciyer;
for(let k = 0; k < city.length; k++) {
let option = document.createElement("option");
option.innerHTML = city[k].name;
option.value = city[k].cyid;
newSelect2.appendChild(option);
}
document.forms[0].appendChild(newSelect2);
}
}
}
})
</script>
</body>
</html>