2021-04-05

使用原生js语言判断下拉列表是否选中的方法

在使用原生js语言判断下拉列表时总是出错， 虽然使用Jquery也可以达到目的。 但有一种一定要用使用原生js的固执存在。在网上寻找答案的过程中，进一步补充了一些HTML的基础知识。顿时豁然开朗。所以总结一下自己出错的原因。

你要提交的数据在哪里？

要使用下拉列表的表单输入方式是就必须要用到select元素。 首先要明白我们点击表单提交的数据是什么样子的， 我们提交的是包含名和值的键值对。它的形式是name=“value”;name 表明了它是关于什么的数据。 我们必须给数据取个恰当的名字才能搞清楚他是什么东西。value 是存储的数据的大小或取值，它可能是数字也可能是字符也可能是文本。select下还有个option元素，用来做下拉框。它的形式如下：

<select name="education" id="education">
	<option style="display: none;">请选择</option>
	<option class="background" value="本科">本科</option>
	<option class="background" value="高中">高中</option>
	<option class="background" value="硕士">硕士</option>
	<option class="background" value="博士">博士</option>
	<option class="background" value="大专">大专</option></select>

这是一个输入教育背景的下拉框。你要提交的数据的键名是存在是放在select的name属性的。 而你要提交数据的键值是放在option元素里属性value值里的。比如你选中了本科， 那你提交的数据就是education=“本科”; 所以要判断下拉列表是否被选中或得到它的值都要先选择到select元素去获取到它的name。 option元素的内容如不带引号的本科是下拉框显示的文本并不是你提交数据的value。 第一个option元素是我做的提示框里面所以并没给它赋value值。

js判断下拉框是否被选中

//检查教育背景输入    
function checkEducation() {         
	let select = document.getElementById("education");
	let options = document.getElementsByClassName("background");
	for(let i=0;i<options.length;i++){
		if(options[i].selected){
			return true;
		}
	}
	alert("请填入教育背景!")
	return false;
}

首先，根据id得到了select元素，接着再根据类名得到了我需要遍历的option的元素我把它们取名为background类。遍历options数组使用selected方法。若元素被选择则返回为true; 若元素都未被选择则会显示一个弹窗效果。
其实检查要检查表单的输入不能提交为空。使用HTML5的语言就可以作到，给表单输入添加required属性即可。它在表单提交为空时提示必须输入。此外还可添加pattern属性为表单输入设置格式，支持正则写法。 感兴趣的同学可查看HTM L5的新功能。