如何用js实现select逐渐选择

我现在写了三个select选择框，我现在要求是第一个选择框为enable可选状态，第二和第三暂时为disabled，当第一个select进行了选择值后第二才能进行选择，第二个进行选择了第三个才能选择，并且要求在第三个select选择后进行change事件跳转url，并且在跳转后三个select选择的值要求跟原来选择的值是一样的。我是个js方面的完全菜鸟求大神帮助啊如果有写好过的例子求粘贴和发到我邮箱：[email protected]!跪求跪谢啊！selecturljs跳转

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<form id="f1">
   <select id="s1" name="s1"     >
   <option value="" >请选择</option>
   <option value="1" >1</option>
   <option value="2">2</option>
   </select>
   <select id="s2" name="s2"     disabled  >
   <option value="" >请选择</option>
   <option value="a" >a</option>
   <option value="b">b</option>
   </select>
   <select id="s3" name="s3"   disabled   >
   <option value=""  >请选择</option>
   <option value="abc" >abc</option>
   <option value="efg">efg</option>
   </select>
</form>
<script>
document.write( new Date().getTime() )

function g(id){ return document.getElementById(id)  }
g('s1').onchange=function(){
g('s2').disabled=!this.value;
}
g('s2').onchange=function(){
g('s3').disabled=!this.value;
}
g('s3').onchange=function(){
window.name=[g('s1').value,g('s2').value,this.value];
this.form.submit();
}
window.onload=function(){
var vs=this.name.split(',')
for(var i=0;i<vs.length;i++){
g('s'+(i+1)).value=vs[i];
if(i!=2) g('s'+(i+1)).onchange()
}
}
</script>
<!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>
<script type="text/javascript">
var a={
'eles':[],
'cooks':{},
'$':function(){
for(var i=0,len=arguments.length;i<len;i++){
this.eles.push(document.getElementById(arguments[i]));
}
},
'setCookie':function(){
var str="";
for(var i in this.cooks){
if(this.cooks.hasOwnProperty(i)){
str+=this.cooks[i];
}
}
document.cookie="cooks="+str+";max-age=1000000";
},
'getCookie':function(){
var cook=document.cookie;
var begin=cook.indexOf('cooks')+6;
var end=cook.indexOf(";",begin);
if(end==-1){
end=cook.length;
}
cook=cook.substring(begin,end);
return cook;
},
'setValues':function(){
var str=this.getCookie();
str=str.split(',');
for(var i=0;i<this.eles.length;i++){
this.eles[i].value=str[i];
}
},
'init':function(){
this.$.apply(this,arguments);
var me=this;
this.setValues();
for(var i=0,len=me.eles.length;i<len;i++){
(function(m){
me.eles[m].onchange=function(){
me.cooks[m]=me.eles[m][me.eles[m].selectedIndex].innerHTML+",";
if(m+1<len){
me.eles[m+1].disabled=false;
}else{
me.setCookie();
window.location.href=me.eles[m][me.eles[m].selectedIndex].innerHTML;
}
}
})(i);
}
}
}
window.onload=function(){a.init('test1','test2','test3')};
</script>
</head><body>
<select id="test1">
<option value="1">1</option>
    <option value="2">2</option>
</select>
<select id="test2" disabled="disabled">
<option value="3">3</option>
    <option value="4">4</option>
</select>
<select id="test3" disabled="disabled">
<option value="http://www.baidu.com">http://www.baidu.com</option>
    <option value="http://www.hao123.com">http://www.hao123.com</option>
</select>
</body>
</html>
三个下拉应该有关系吗?是否考虑过使用联动下拉?或者分组下拉分组下拉是这样
<select name="test">
<OPTGroup label="a">
<option value="1">aaa</option>
<option value="2">bbb</option>
</OptGroup>
<OPTGroup label="b">
<option value="3">ccc</option>
<option value="4">ddd</option>
</OptGroup></select>为什么考虑用分组呢,因为三个下拉做一个事情,给用户的感觉到下拉太多,使用困难
        function $E(id) {
            return document.getElementById(id);
        }
        function selectEnable() {
            var formId = $E('f1');
            var s1 = $E('s1');
            var s2 = $E('s2');
            var s3 = $E('s3');


            s1.onchange = function () {
                s2.disabled = !this.value;
            }
            s2.onchange = function () {
                s3.disabled = !this.value;
            }
            s3.onchange = function () {
                this.form.submit();
            }
        }