读书人
栏目▼

新增加行与原来一摸一样的下拉联动列表

发布时间： 2013-08-13 16:43:28 作者： rapoo

新增多行与原来一摸一样的下拉联动列表
<html>
<head>
<title>List</title>
<meta http-equiv="Content-Type" content="text/html; c
harset=gb2312">
<script defer LANGUAGE="javascript">
<!--
var onecount;
onecount=0;

subcat = new Array();
subcat[0] = new Array("徐汇区","01","001");
subcat[1] = new Array("嘉定区","01","002");
subcat[2] = new Array("黄浦区","01","003");
subcat[3] = new Array("南昌市","02","004");
subcat[4] = new Array("九江市","02","005");
subcat[5] = new Array("上饶市","02","006");

onecount=6;

function changelocation(locationid){
document.myform.smalllocation.length = 0;

var locationid=locationid;
var i;
document.myform.smalllocation.options[0] = new Option('====所有地区====','');
for (i=0;i <onecount; i++){
if (subcat[i][1] == locationid){
document.myform.smalllocation.options[document.myform.smalllocation.length]
= new Option(subcat[i][0], subcat[i][2]);
}
}

}

/**function getSelect1(){

var Myform=document.getElementById('myform');

var Myfieldset=document.createElement("fieldset");
var Myselect1=document.createElement("select");
var Myselect2=document.createElement("select");
var Myoption1=document.createElement("option");
var Myoption2=document.createElement("option");
var Myinput=document.createElement("input");

Myselect1.options.add(new Option("text","value"));
Myselect1.options.add(new Option("text1","value"));
Myinput.setAttribute("type","text")
Myinput.setAttribute("size","30")
Myinput.setAttribute("name","SearchTxt")

Myselect1.appendChild(Myoption1)
Myselect2.appendChild(Myoption2)
Myfieldset.appendChild(Myselect1)
Myfieldset.appendChild(Myselect2)
Myfieldset.appendChild(Myinput)
Myform.appendChild(Myfieldset)

}*/
function getSelect1(){
alert("****")
var Myform=document.getElementById('myform');
var Myfieldset=document.createElement("fieldset")
Myfieldset.innerHTML="<select name="biglocation" onChange="changelocation(document.myform.biglocation.options[document.myform.biglocation.selectedIndex].value)"><option value="01" selected>上海</option><option value="02">江西</option></select><select name="smalllocation"><option selected value="">==所有地区==</option></select><input type="text" name="SearchTxt" size="30" id="SearchTxt" />&nbsp&nbsp<input type="button"


Myform.appendChild(Myfieldset)
alert("%%%%%%")
}

//-->
</script>
</head>
<body>
<form id="myform" name="myform" method="post">
<fieldset id="myfieldset">
<select name="biglocation"
onChange="changelocation(document.myform.biglocation.options[document.myform.biglocation.selectedIndex].value)">
<option value="01" selected>上海</option>
<option value="02">江西</option>
</select>
<select name="smalllocation">
<option selected value="">==所有地区==</option>
</select>
<input type="text" name="SearchTxt" size="30" id="SearchTxt" />&nbsp&nbsp 
</fieldset>
<input type="button" class="input-btn" value="add" onclick="getSelect1()"/> 

</form>
<script LANGUAGE="javascript">
<!--
changelocation(document.myform.biglocation.options[document.myform.biglocation.selectedIndex].value);
//-->
</script>
</body>
</html>
在别人代码基础上改的 innerHtml onchage 新增 多行一模一样联动下拉列表 类似于在线注册简历的新增教育背景
[解决办法]


<!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 defer LANGUAGE="javascript">
<!--
var onecount=0;

subcat = new Array();
subcat[0] = new Array("徐汇区","01","001");
subcat[1] = new Array("嘉定区","01","002");
subcat[2] = new Array("黄浦区","01","003");
subcat[3] = new Array("南昌市","02","004");
subcat[4] = new Array("九江市","02","005");
subcat[5] = new Array("上饶市","02","006");

onecount=6; 
 

function changelocation(locationid){
document.myform.smalllocation.length = 0;

var locationid=locationid;
var i;
document.myform.smalllocation.options[0] = new Option('====所有地区====','');
for (i=0;i <onecount; i++){
if (subcat[i][1] == locationid){
document.myform.smalllocation.options[document.myform.smalllocation.length]= new Option(subcat[i][0], subcat[i][2]);
}
}
}
function getSelect1(){
alert("****");
 var Myform=document.getElementById('myform');
 var Myfieldset=document.createElement("fieldset");
 Myfieldset.innerHTML="<select name=\"biglocation\" onChange=\"changelocation(document.myform.biglocation.options[document.myform.biglocation.selectedIndex].value)\"><option value=\"01\" selected>上海</option><option value=\"02\">江西</option></select><select name=\"smalllocation\"><option selected value=\"\">==所有地区==</option></select><input type=\"text\" name=\"SearchTxt\" size=\"30\" id=\"SearchTxt\" />&nbsp&nbsp<input type=\"button\" class=\"input-btn\"  value=\"add\" onclick=\"getSelect1()\"/>";
 Myform.appendChild(Myfieldset);
    alert("%%%%%%");
}

//-->
</script>
</head>
<body>
<form id="myform" name="myform" method="post">
<fieldset id="myfieldset">
<select name="biglocation"
onChange="changelocation(document.myform.biglocation.options[document.myform.biglocation.selectedIndex].value)">
<option value="01" selected>上海</option>
<option value="02">江西</option>
</select>
<select name="smalllocation">
<option selected value="">==所有地区==</option>
</select>
<input type="text" name="SearchTxt" size="30" id="SearchTxt" />&nbsp&nbsp 
</fieldset>
<input type="button" class="input-btn"  value="add" onclick="getSelect1()"/> 

</form>
<script LANGUAGE="javascript">
<!--
changelocation(document.myform.biglocation.options[document.myform.biglocation.selectedIndex].value);
//-->
</script>
</body>
</html>



双引号中的双引号要转义
[解决办法]

<!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 defer LANGUAGE="javascript">
<!--
var onecount=0;

subcat = new Array();
subcat[0] = new Array("徐汇区","01","001");
subcat[1] = new Array("嘉定区","01","002");
subcat[2] = new Array("黄浦区","01","003");
subcat[3] = new Array("南昌市","02","004");
subcat[4] = new Array("九江市","02","005");
subcat[5] = new Array("上饶市","02","006");

onecount=6;

function changelocation(locationid,selectE){
selectE.length = 0;

var locationid=locationid;
var i;
selectE.options[0] = new Option('====所有地区====','');
for (i=0;i <onecount; i++){
if (subcat[i][1] == locationid){
selectE.options[selectE.length]= new Option(subcat[i][0], subcat[i][2]);
}
}
}
function getSelect1(){

 var Myform=document.getElementById('myform');
 var Myfieldset=document.createElement("fieldset");
 Myfieldset.innerHTML="<select onChange=\"changelocation(this.options[this.selectedIndex].value,this.nextSibling)\"><option value=\"01\" selected>上海</option><option value=\"02\">江西</option></select><select><option selected value=\"\">==所有地区==</option></select><input type=\"text\" name=\"SearchTxt\" size=\"30\" id=\"SearchTxt\" />&nbsp&nbsp<input type=\"button\" class=\"input-btn\"  value=\"add\" onclick=\"getSelect1()\"/>";
 Myform.appendChild(Myfieldset);
    
}

//-->
</script>
</head>
<body>
<form id="myform" name="myform" method="post">
<fieldset id="myfieldset">
<select name="biglocation"
onChange="changelocation(this.options[this.selectedIndex].value,this.nextSibling)"><option value="01" selected>上海</option><option value="02">江西</option></select><select name="smalllocation"><option selected value="">==所有地区==</option></select>
<input type="text" name="SearchTxt" size="30" id="SearchTxt" />&nbsp&nbsp 
</fieldset>
<input type="button" class="input-btn"  value="add" onclick="getSelect1()"/> 

</form>
<script LANGUAGE="javascript">
<!--
changelocation(window.myform.biglocation.options[window.myform.biglocation.selectedIndex].value,window.myform.smalllocation); 
 
//-->
</script>
</body>
</html>


[解决办法]
引用:
尝试过，但是没成功，谢谢你


function getSelect1(){

 var Myform=document.getElementById('myform');
 var Myfieldset=document.createElement("fieldset");
 //Myfieldset.innerHTML="<select onChange=\"changelocation(this.options[this.selectedIndex].value,this.nextSibling)\"><option value=\"01\" selected>上海</option><option value=\"02\">江西</option></select><select><option selected value=\"\">==所有地区==</option></select><input type=\"text\" name=\"SearchTxt\" size=\"30\" id=\"SearchTxt\" />&nbsp&nbsp<input type=\"button\" class=\"input-btn\"  value=\"add\" onclick=\"getSelect1()\"/>";

var s1=document.createElement('select');
s1a=document.createAttribute('onchange');
s1a.nodeValue ="changelocation(this.options[this.selectedIndex].value,this.nextSibling)";
s1.setAttributeNode(s1a);
s1.innerHTML="<option value=\"01\" selected>上海</option><option value=\"02\">江西</option>";
Myfieldset.appendChild(s1);

var s2=document.createElement('select');
s1op=document.createElement('option');
s1op.value= "";
s1op.text= "==所有地区==";
s2.appendChild(s1op);

Myfieldset.appendChild(s2);
//...
 Myform.appendChild(Myfieldset);
    
}

[解决办法]
引用:
Quote: 引用:

Quote: 引用:

尝试过，但是没成功，谢谢你


function getSelect1(){

 var Myform=document.getElementById('myform');
 var Myfieldset=document.createElement("fieldset");
 //Myfieldset.innerHTML="<select onChange=\"changelocation(this.options[this.selectedIndex].value,this.nextSibling)\"><option value=\"01\" selected>上海</option><option value=\"02\">江西</option></select><select><option selected value=\"\">==所有地区==</option></select><input type=\"text\" name=\"SearchTxt\" size=\"30\" id=\"SearchTxt\" />&nbsp&nbsp<input type=\"button\" class=\"input-btn\"  value=\"add\" onclick=\"getSelect1()\"/>";

var s1=document.createElement('select');
s1a=document.createAttribute('onchange'); 
 
s1a.nodeValue ="changelocation(this.options[this.selectedIndex].value,this.nextSibling)";
s1.setAttributeNode(s1a);
s1.innerHTML="<option value=\"01\" selected>上海</option><option value=\"02\">江西</option>";
Myfieldset.appendChild(s1);

var s2=document.createElement('select');
s1op=document.createElement('option');
s1op.value= "";
s1op.text= "==所有地区==";
s2.appendChild(s1op);

Myfieldset.appendChild(s2);
//...
 Myform.appendChild(Myfieldset);
    
}



这个还有点bug 新增的必须先点击江西第二个下拉列表才会显示内容
你是一点不会写吗？我只是写个架子，你照着写就可以，还非得让我一点不落的都写出来

读书人网 >JavaScript

热点推荐

触屏版 | 电脑版

读书人网 m.reader8.net