添加了option,但是无法选中option

qq277049 2011-11-29 09:54:08
添加了option,但是无法选中option


//3.js 内容过长执法部分的

var PCAD="上海市$市辖区,黄浦区,卢湾区,徐汇区,长宁区,静安区,普陀区,闸北区,虹口区,杨浦区,闵行区,宝山区,嘉定区,浦东新区,金山区,松江区,青浦区,南汇区,奉贤区|市辖县,崇明县#北京市$市辖区,东城区,西城区,崇文区,宣武区,朝阳区,丰台区,石景山区,海淀区,门头沟区,房山区,通州区,顺义区,昌平区,大兴区,怀柔区,平谷区|市辖县,密云县,延庆县#天津市$市辖区,和平区,河东区,河西区,南开区,河北区,红桥区,塘沽区,汉沽区,大港区,东丽区,西青区,津南区,北辰区,武清区,宝坻区|市辖县,宁河县,静海县,蓟县";










<html>

<head>

<script type="text/javascript" src="3.js"></script>

<script>

var pr=PCAD.split("#");

var shengshi=new Array();//省级

var shi=0;//省级代码

var contonal=new Array();//市区数组

function addoption(){

    //提取省市的数组

    for(var i=0;i<pr.length;i++){

        shengshi[i]=pr[i].split("$");

    }

    var objSelect = document.myform.province; 

    var srtName=null;

    var strvalue=null;

    objSelect.options.length = 1;

    for(var j=0;j<shengshi.length;j++){

        strName=shengshi[j][0];

        strvalue=j+1;

        var objOption = new Option(strName,strvalue);

        objSelect.options.add( objOption );

    }

}

//给市级赋值

function change(){

	//var op=document.myform.province;

	alert(op.length);

	//shi=op.value;

}

function pro(){

	//判断是否有省级

	if(shi!=0){

		//进行拆分数组

		contonal=shengshi[shi][1].split(",");

		//获取select

		var s=document.myform.city;

		var name=null;

		var value=null;

		//清空原options

		s.options.length=1;

		for(var i=0;i<contonal.length;i++){

			name=contonal[i];

			value=i+1;

			var opt=new Option(name,value);

			s.options.add(opt);

		}

	}

}

var myform=document.myform;

//进行用户名判断

//获取焦点

var isus=false;

function userfocus(){

	if(isus==false){

		document.myform.username.value="";

		isus=true;

	}

}

//失去焦点



function userblur(a){

	if(!a.value.match(/^\w{4,16}$/) && a.value!="请输入用户名"){

		document.getElementById("userid").innerHTML="用户名输入错误";

		document.getElementById("userid").style.color="red";

		return false;

	}else{

		document.getElementById("userid").innerHTML="通过验证";

		document.getElementById("userid").style.color="blue";

		return true;

	}

}

var pass1=null;

//进行用户验证

function ps1(a){

	//进行长度判断

	if(a.value.length<6 || a.value.length>16){

		document.getElementById("pass1").innerHTML="密码长度至少6到16位。";

		document.getElementById("pass1").style.color="red";

		return false;

	}else{

		document.getElementById("pass1").innerHTML="通过验证";

		document.getElementById("pass1").style.color="blue";

		pass1=a.value;

		return true;

	}

}

function ps2(a){

	if(a.value!=pass1){

		document.getElementById("pass2").innerHTML="两次密码不一样";

		document.getElementById("pass2").style.color="red";

		return false;

	}else{

		document.getElementById("pass2").innerHTML="通过验证";

		document.getElementById("pass2").style.color="blue";

		return true;

	}

}



function ema(a){

	//进行E-mail判断

	if(!a.value.match(/[a-z0-9-\.]{1,30}@[a-z0-9-]{1,65}.(com|net|org|info|biz|([a-z]{2,3}.[a-z]{2}))/)){

		document.getElementById("emaill").innerHTML="Email输入不正确";

		document.getElementById("emaill").style.color="red";

		return false;

	}else{

		document.getElementById("emaill").innerHTML="通过验证";

		document.getElementById("emaill").style.color="blue";

		return true;

	}

}



//进行手机号判断

function p(a){

//进行电话判断

	if(!a.value.match(/^1[0-9]{10}$/)){

		document.getElementById("phone").innerHTML="手机号码输入不正确";

		document.getElementById("phone").style.color="red";

		return false;

	}else{

		document.getElementById("phone").innerHTML="通过验证";

		document.getElementById("phone").style.color="blue";

		return true;

	}



}

	

//验证

function validate(){

	var f=document.myform;

	//进行用户判断

	if(!userblur(f.username)){

		document.getElementById("userid").innerHTML="用户名输入错误";

		document.getElementById("userid").style.color="red";

		return false;

	}

	//进行密码判断

	//pass1=f.pass1.value;

	if(!ps1(f.pass1)){

		document.getElementById("pass1").innerHTML="密码长度至少6到16位。";

		document.getElementById("pass1").style.color="red";

		return false;

	}

	if(!ps2(f.pass2)){

		document.getElementById("pass2").innerHTML="两次密码不一样";

		document.getElementById("pass2").style.color="red";

		return false;

	}

	//进行E-mail判断

	if(!ema(f.email)){

		document.getElementById("emaill").innerHTML="Email输入不正确";

		document.getElementById("emaill").style.color="red";

		return false;

	}

	

	//进行电话判断

	if(!p(f.phone)){

		document.getElementById("phone").innerHTML="手机号码输入不正确";

		document.getElementById("phone").style.color="red";

		return false;

	}

	//验证码判断，暂无

}





function test(){

	alert("测试");

}

</script>





</head>

<body>

<table border="1" align="center">

	<form name="myform" onsubmit="return validate()">

		<tr>

			<td>用户名：</td><td><input type="text" name="username" value="请输入用户名" onfocus="userfocus()" onblur="userblur(this)"/><span id="userid"></span></td>

		</tr>

		<tr>

			<td>密码：</td><td><input type="password" name="pass1" onblur="ps1(this)"/><span id="pass1"></span></td>

		</tr>

		<tr>

			<td>重复密码：</td><td><input type="password" name="pass2" onblur="ps2(this)"/><span id="pass2"></span></td>

		</tr>

		<tr>

			<td>Email：</td><td><input type="text" name="email" onblur="ema(this)"/><span id="emaill"></span></td>

		</tr>

		<tr>

			<td>手机：</td><td><input type="text" name="phone" onblur="p(this)"/><span id="phone"></span></td>

		</tr>

		<tr>	

			<td>性别：</td><td><input type="radio" name="sex" value="1" checked />男<input type="radio" name="sex" value="2"/>女</td>

		</tr>

		<tr>

			<td>所属区域：</td><td>

				<select name="province" onclick="addoption()" onchange="change()">

				<option>--请选择省份--</option>

				</select>

				<select id="city">

				<option>--请选择城市--</option>

				</select>

				<select id="area">

				<option>--请选择地区--</option>

				</select>

			

		</tr>

		<tr>

			<td colspan="3" align="center"><input type="submit" value="提交"/></td>

		</tr>

	</form>

</table>

</body>

</html>
...全文
546 3 打赏 收藏 转发到动态 举报
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
dalmeeme 2011-11-29
  • 打赏
  • 举报
 回复
去掉下拉框的onclick事件，并在</body>前添加执行addoption()。
<html>

<head>

<script type="text/javascript" src=""></script>

<script>

var PCAD="上海市$市辖区,黄浦区,卢湾区,徐汇区,长宁区,静安区,普陀区,闸北区



,虹口区,杨浦区,闵行区,宝山区,嘉定区,浦东新区,金山区,松江区,青浦区,南汇区



,奉贤区|市辖县,崇明县#北京市$市辖区,东城区,西城区,崇文区,宣武区,朝阳区,



丰台区,石景山区,海淀区,门头沟区,房山区,通州区,顺义区,昌平区,大兴区,怀柔



区,平谷区|市辖县,密云县,延庆县#天津市$市辖区,和平区,河东区,河西区,南开区



,河北区,红桥区,塘沽区,汉沽区,大港区,东丽区,西青区,津南区,北辰区,武清区,



宝坻区|市辖县,宁河县,静海县,蓟县";



var pr=PCAD.split("#");

var shengshi=new Array();//省级

var shi=0;//省级代码

var contonal=new Array();//市区数组

function addoption(){

    //提取省市的数组

    for(var i=0;i<pr.length;i++){

        shengshi[i]=pr[i].split("$");

    }

    var objSelect = document.myform.province; 

    var srtName=null;

    var strvalue=null;

    objSelect.options.length = 1;

    for(var j=0;j<shengshi.length;j++){

        strName=shengshi[j][0];

        strvalue=j+1;

        var objOption = new Option(strName,strvalue);

        objSelect.options.add( objOption );

    }

}

//给市级赋值

function change(){

    //var op=document.myform.province;

    alert(op.length);

    //shi=op.value;

}

function pro(){

    //判断是否有省级

    if(shi!=0){

        //进行拆分数组

        contonal=shengshi[shi][1].split(",");

        //获取select

        var s=document.myform.city;

        var name=null;

        var value=null;

        //清空原options

        s.options.length=1;

        for(var i=0;i<contonal.length;i++){

            name=contonal[i];

            value=i+1;

            var opt=new Option(name,value);

            s.options.add(opt);

        }

    }

}

var myform=document.myform;

//进行用户名判断

//获取焦点

var isus=false;

function userfocus(){

    if(isus==false){

        document.myform.username.value="";

        isus=true;

    }

}

//失去焦点



function userblur(a){

    if(!a.value.match(/^\w{4,16}$/) && a.value!="请输入用户名"){

        document.getElementById("userid").innerHTML="用户名输入错误";

        document.getElementById("userid").style.color="red";

        return false;

    }else{

        document.getElementById("userid").innerHTML="通过验证";

        document.getElementById("userid").style.color="blue";

        return true;

    }

}

var pass1=null;

//进行用户验证

function ps1(a){

    //进行长度判断

    if(a.value.length<6 || a.value.length>16){

        document.getElementById("pass1").innerHTML="密码长度至少6到16位



。";

        document.getElementById("pass1").style.color="red";

        return false;

    }else{

        document.getElementById("pass1").innerHTML="通过验证";

        document.getElementById("pass1").style.color="blue";

        pass1=a.value;

        return true;

    }

}

function ps2(a){

    if(a.value!=pass1){

        document.getElementById("pass2").innerHTML="两次密码不一样";

        document.getElementById("pass2").style.color="red";

        return false;

    }else{

        document.getElementById("pass2").innerHTML="通过验证";

        document.getElementById("pass2").style.color="blue";

        return true;

    }

}



function ema(a){

    //进行E-mail判断

    if(!a.value.match(/[a-z0-9-\.]{1,30}@[a-z0-9-]{1,65}.



(com|net|org|info|biz|([a-z]{2,3}.[a-z]{2}))/)){

        document.getElementById("emaill").innerHTML="Email输入不正确";

        document.getElementById("emaill").style.color="red";

        return false;

    }else{

        document.getElementById("emaill").innerHTML="通过验证";

        document.getElementById("emaill").style.color="blue";

        return true;

    }

}



//进行手机号判断

function p(a){

//进行电话判断

    if(!a.value.match(/^1[0-9]{10}$/)){

        document.getElementById("phone").innerHTML="手机号码输入不正确";

        document.getElementById("phone").style.color="red";

        return false;

    }else{

        document.getElementById("phone").innerHTML="通过验证";

        document.getElementById("phone").style.color="blue";

        return true;

    }



}

    

//验证

function validate(){

    var f=document.myform;

    //进行用户判断

    if(!userblur(f.username)){

        document.getElementById("userid").innerHTML="用户名输入错误";

        document.getElementById("userid").style.color="red";

        return false;

    }

    //进行密码判断

    //pass1=f.pass1.value;

    if(!ps1(f.pass1)){

        document.getElementById("pass1").innerHTML="密码长度至少6到16位



。";

        document.getElementById("pass1").style.color="red";

        return false;

    }

    if(!ps2(f.pass2)){

        document.getElementById("pass2").innerHTML="两次密码不一样";

        document.getElementById("pass2").style.color="red";

        return false;

    }

    //进行E-mail判断

    if(!ema(f.email)){

        document.getElementById("emaill").innerHTML="Email输入不正确";

        document.getElementById("emaill").style.color="red";

        return false;

    }

    

    //进行电话判断

    if(!p(f.phone)){

        document.getElementById("phone").innerHTML="手机号码输入不正确";

        document.getElementById("phone").style.color="red";

        return false;

    }

    //验证码判断，暂无

}





function test(){

    alert("测试");

}

</script>





</head>

<body>

<table border="1" align="center">

    <form name="myform" onsubmit="return validate()">

        <tr>

            <td>用户名：</td><td><input type="text" name="username" 



value="请输入用户名" onfocus="userfocus()" onblur="userblur



(this)"/><span id="userid"></span></td>

        </tr>

        <tr>

            <td>密码：</td><td><input type="password" name="pass1" 



onblur="ps1(this)"/><span id="pass1"></span></td>

        </tr>

        <tr>

            <td>重复密码：</td><td><input type="password" name="pass2" 



onblur="ps2(this)"/><span id="pass2"></span></td>

        </tr>

        <tr>

            <td>Email：</td><td><input type="text" name="email" 



onblur="ema(this)"/><span id="emaill"></span></td>

        </tr>

        <tr>

            <td>手机：</td><td><input type="text" name="phone" 



onblur="p(this)"/><span id="phone"></span></td>

        </tr>

        <tr>    

            <td>性别：</td><td><input type="radio" name="sex" value="1" 



checked />男<input type="radio" name="sex" value="2"/>女</td>

        </tr>

        <tr>

            <td>所属区域：</td><td>

                <select name="province" onchange="change()">

                <option>--请选择省份--</option>

                </select>

                <select id="city">

                <option>--请选择城市--</option>

                </select>

                <select id="area">

                <option>--请选择地区--</option>

                </select>

            

        </tr>

        <tr>

            <td colspan="3" align="center"><input type="submit" value="



提交"/></td>

        </tr>

    </form>

</table>

<script>addoption()</script>

</body>

</html>
hookee 2011-11-29
  • 打赏
  • 举报
 回复 


function addoption(){

    //提取省市的数组

    for(var i=0;i<pr.length;i++){

        shengshi[i]=pr[i].split("$");

    }

    var objSelect = document.myform.province; 

    var srtName=null;

    var strvalue=null;

    objSelect.options.length = 1;

    for(var j=0;j<shengshi.length;j++){

        strName=shengshi[j][0];

        strvalue=j+1;

        var objOption = new Option(strName,strvalue);

        objSelect.options.add( objOption );

    }

    document.myform.province.onclick = null;

}
MuBeiBei 2011-11-29
  • 打赏
  • 举报
 回复 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title></title> 

</head>



<body> 

<script type="text/javascript" language="javascript">

var PCAD="上海市$市辖区,黄浦区,卢湾区,徐汇区,长宁区,静安区,普陀区,闸北区,虹口区,杨浦区,闵行区,宝山区,嘉定区,浦东新区,金山区,松江区,青浦区,南汇区,奉贤区|市辖县,崇明县#北京市$市辖区,东城区,西城区,崇文区,宣武区,朝阳区,丰台区,石景山区,海淀区,门头沟区,房山区,通州区,顺义区,昌平区,大兴区,怀柔区,平谷区|市辖县,密云县,延庆县#天津市$市辖区,和平区,河东区,河西区,南开区,河北区,红桥区,塘沽区,汉沽区,大港区,东丽区,西青区,津南区,北辰区,武清区,宝坻区|市辖县,宁河县,静海县,蓟县";





</script>







</head>

<body>

<table border="1" align="center">

    <form name="myform" onsubmit="return validate()">

        <tr>

            <td>用户名：</td><td><input type="text" name="username" value="请输入用户名" onfocus="userfocus()" onblur="userblur(this)"/><span id="userid"></span></td>

        </tr>

        <tr>

            <td>密码：</td><td><input type="password" name="pass1" onblur="ps1(this)"/><span id="pass1"></span></td>

        </tr>

        <tr>

            <td>重复密码：</td><td><input type="password" name="pass2" onblur="ps2(this)"/><span id="pass2"></span></td>

        </tr>

        <tr>

            <td>Email：</td><td><input type="text" name="email" onblur="ema(this)"/><span id="emaill"></span></td>

        </tr>

        <tr>

            <td>手机：</td><td><input type="text" name="phone" onblur="p(this)"/><span id="phone"></span></td>

        </tr>

        <tr>    

            <td>性别：</td><td><input type="radio" name="sex" value="1" checked />男<input type="radio" name="sex" value="2"/>女</td>

        </tr>

        <tr>

            <td>所属区域：</td><td>

                <select name="province" onchange="change(this)">

                <option>--请选择省份--</option>

                </select>

                <select id="city">

                <option>--请选择城市--</option>

                </select>

                <select id="area">

                <option>--请选择地区--</option>

                </select>

            

        </tr>

        <tr>

            <td colspan="3" align="center"><input type="submit" value="提交"/></td>

        </tr>

    </form>

</table>

</body> 

<script>

var pr=PCAD.split("#");

var shengshi=new Array();//省级

var shi=0;//省级代码

var contonal=new Array();//市区数组

function addoption(){

    //提取省市的数组

    for(var i=0;i<pr.length;i++){

        shengshi[i]=pr[i].split("$");

    }

    var objSelect = document.myform.province; 

    var srtName=null;

    var strvalue=null;

    objSelect.options.length = 1;

    for(var j=0;j<shengshi.length;j++){

        strName=shengshi[j][0];

        strvalue=j+1;

        var objOption = new Option(strName,strvalue);

        objSelect.options.add( objOption );

    }

}

//给市级赋值

function change(ele){

    //var op=document.myform.province;

    alert(ele.length);

    //shi=op.value;

}

function pro(){

    //判断是否有省级

    if(shi!=0){

        //进行拆分数组

        contonal=shengshi[shi][1].split(",");

        //获取select

        var s=document.myform.city;

        var name=null;

        var value=null;

        //清空原options

        s.options.length=1;

        for(var i=0;i<contonal.length;i++){

            name=contonal[i];

            value=i+1;

            var opt=new Option(name,value);

            s.options.add(opt);

        }

    }

}

var myform=document.myform;

//进行用户名判断

//获取焦点

var isus=false;

function userfocus(){

    if(isus==false){

        document.myform.username.value="";

        isus=true;

    }

}

//失去焦点



function userblur(a){

    if(!a.value.match(/^\w{4,16}$/) && a.value!="请输入用户名"){

        document.getElementById("userid").innerHTML="用户名输入错误";

        document.getElementById("userid").style.color="red";

        return false;

    }else{

        document.getElementById("userid").innerHTML="通过验证";

        document.getElementById("userid").style.color="blue";

        return true;

    }

}

var pass1=null;

//进行用户验证

function ps1(a){

    //进行长度判断

    if(a.value.length<6 || a.value.length>16){

        document.getElementById("pass1").innerHTML="密码长度至少6到16位。";

        document.getElementById("pass1").style.color="red";

        return false;

    }else{

        document.getElementById("pass1").innerHTML="通过验证";

        document.getElementById("pass1").style.color="blue";

        pass1=a.value;

        return true;

    }

}

function ps2(a){

    if(a.value!=pass1){

        document.getElementById("pass2").innerHTML="两次密码不一样";

        document.getElementById("pass2").style.color="red";

        return false;

    }else{

        document.getElementById("pass2").innerHTML="通过验证";

        document.getElementById("pass2").style.color="blue";

        return true;

    }

}



function ema(a){

    //进行E-mail判断

    if(!a.value.match(/[a-z0-9-\.]{1,30}@[a-z0-9-]{1,65}.(com|net|org|info|biz|([a-z]{2,3}.[a-z]{2}))/)){

        document.getElementById("emaill").innerHTML="Email输入不正确";

        document.getElementById("emaill").style.color="red";

        return false;

    }else{

        document.getElementById("emaill").innerHTML="通过验证";

        document.getElementById("emaill").style.color="blue";

        return true;

    }

}



//进行手机号判断

function p(a){

//进行电话判断

    if(!a.value.match(/^1[0-9]{10}$/)){

        document.getElementById("phone").innerHTML="手机号码输入不正确";

        document.getElementById("phone").style.color="red";

        return false;

    }else{

        document.getElementById("phone").innerHTML="通过验证";

        document.getElementById("phone").style.color="blue";

        return true;

    }



}

    

//验证

function validate(){

    var f=document.myform;

    //进行用户判断

    if(!userblur(f.username)){

        document.getElementById("userid").innerHTML="用户名输入错误";

        document.getElementById("userid").style.color="red";

        return false;

    }

    //进行密码判断

    //pass1=f.pass1.value;

    if(!ps1(f.pass1)){

        document.getElementById("pass1").innerHTML="密码长度至少6到16位。";

        document.getElementById("pass1").style.color="red";

        return false;

    }

    if(!ps2(f.pass2)){

        document.getElementById("pass2").innerHTML="两次密码不一样";

        document.getElementById("pass2").style.color="red";

        return false;

    }

    //进行E-mail判断

    if(!ema(f.email)){

        document.getElementById("emaill").innerHTML="Email输入不正确";

        document.getElementById("emaill").style.color="red";

        return false;

    }

    

    //进行电话判断

    if(!p(f.phone)){

        document.getElementById("phone").innerHTML="手机号码输入不正确";

        document.getElementById("phone").style.color="red";

        return false;

    }

    //验证码判断，暂无

}





function test(){

    alert("测试");

}



addoption()

</script>

</html>
JS实现select选中option触发事件操作示例
本文实例讲述了JS实现select选中option触发事件操作。分享给大家供大家参考，具体如下： 我们在用到下拉列表框select时，需要对选中的<option>选项触发事件，其实<option>本身没有触发事件方法，我们只有在select里的onchange方法里触发。 想添加一个option的触发事件,在option中添加onclick 点来点去就是不会触发事件 又在select中添加onclick 这下可好了,没选option呢就触发了 百度来的说option没有触发事件,需要在select中加onchange事件,虽然我曾经处理过类似的问题,用过就忘是不是猪脑子…. 这次记住了吧应该
javascript_select_option_操作详解.txt
1 检测是否有选中 2.动态创建select 3.添加选项option 4.删除所有选项option 5.删除一个选项option 6.获得选项option的值......
jQuery操作Select的Option上下移动及移除添加等等
jQuery操作Select Option：向上移动选中的option、向下移动选中的option、移除选中的option、获取所有的option值、添加option等等，下面有个不错的示例，感兴趣的朋友不要错过
Html Select option 如何进行默认选择
给某个option 添加 selected = "selected" 属性就是默认选项 如： 复制代码代码如下: <select id=”isAudit” name=”isAudit”> <option value=”2″>全部option> <option value=”1″ xss=removed>通过option> <option value=”0″>未通过option> </select> 则“通过”为默认选中。
两个select之间option的互相添加操作(jquery实现)
两个select,将其中一个select选中的选项添加到另一个select中,或者点击全部添加按钮将所有的option都添加过去.
JavaScript

87,907

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章