2012-11-08 来源:网络
【实例名称】
JS验证列表框中的值是否重复
【实例描述】
为了方便用户填写资料,可以下拉框的形式让用户选择值代替直接填写。但有时候下拉框并不能提供全部数据,此时需要用户自己填写。本例用来判断用户填写的数据是否已经存在于下拉框中。
【实例代码】
<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>标题页-学无忧(www.xue51.com)</title> <script language="javascript"> function chk() { var txtValue = document.getElementById("txtValue"); //获取文本框的值 var sel = document.getElementById("sel"); //找到下拉框 for (var i=0; i<sel.length; i++) //遍历下拉框中的所有数据 { if (txtValue.value==sel.options[i].text){ //如果输入的值等于下拉框中的值 alert("该值已经存在"); } } } </script> </head> <body> <div id="mydiv"> <select id="sel" name="sel"> <option>China</option> <option>England</option> <option>German</option> </select> <input type="text" name="txtValue" id="txtValue"><br/> <input type="button" value="检测是否存在" onclick="chk();"> </div> </body> </html>
【运行效果】
【难点剖析】
本例首先获取文本框的值,然后对下拉框中的值进行遍历,这使用的是“for”循环语句。“sel.options[i].text用来获取下拉框中的当前值,用此值比较用户输入的值,如果相等,则表示用户输入的数据重复。
【源码下载】
为了JS代码的准确性,请点击:JS验证列表框中的值是否重复 进行本实例源码下载
相关文章