如何用js实现select逐渐选择
我现在写了三个select选择框，我现在要求是第一个选择框为enable可选状态，第二和第三暂时为disabled，当第一个select进行了选择值后第二才能进行选择，第二个进行选择了第三个才能选择，并且要求在第三个select选择后进行change事件跳转url，并且在跳转后三个select选择的值要求跟原来选择的值是一样的。我是个js方面的完全菜鸟 求大神帮助啊 如果有写好过的例子求粘贴和发到我邮箱：1404489027@qq.com!跪求跪谢啊！ select url js 跳转
[解决办法]
<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>
<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();
}
}
