一个下拉菜单动态或静态生成的二级连动
作者:都市浪儿 日期:2007-11-5 17:28:00
<SCRIPT language="JavaScript" id="change_brand" src="" ></SCRIPT>
<script language="JavaScript">
// JavaScript Document
var brand_ary = new Array();
var phone_option = new Array();
function brand_change(id,type)
{
if (id==='')
{return true;}
if (id>=0)
{
var brand=document.getElementById("brand");
var phone=document.getElementById("phone");
brand.disabled = true;
phone.disabled = true;
phone.length=1;
if(type)
{brand_ary[id]=type; }
else if (!brand_ary[id]&&id!='')
{phone.options[0].text='载入中请稍候';
//change_brand属性，通过一个<SCRIPT language="JavaScript" id="change_brand" src="" >< /SCRIPT>空的javascript来调用的。见上面
//change_brand.src="mobileTypes_list.asp?id="+id;//可以调用数据库，生成二级连动。
//调用后生成的显示内容以下
brand_change(15,new Array(432,'1100',381,'1108',337,'1110',340,'1600',433,'2100',377,'2112',294,'2125',295,'2255',435,'2280',437,'3100',446,'3108',385,'3120',376,'3125',369,'3128',448,'3200',386,'3220',378,'3230',955,'3250',450,'3300',453,'3560',458,'3650',387,'3660',460,'5100',388,'5140',960,'5140i',373,'6020',351,'6021',355,'6030',297,'6060',366,'6102',954,'6103',467,'6108',298,'6111',952,'6125',975,'6131',348,'6135',976,'6136',389,'6170',469,'6200',390,'6230',350,'6230i',974,'6233',321,'6235',391,'6255',374,'6260',296,'6268',316,'6270',318,'6280',474,'6600',392,'6610i',393,'6630',478,'6650',380,'6670',357,'6680',364,'6681',939,'6708',480,'6800',413,'6820',961,'6822',419,'7200',482,'7250',486,'7250i',383,'7260',384,'7270',382,'7280',962,'7360',973,'7370',953,'7380',487,'7600',425,'7610',372,'7710',349,'8800',490,'8910i',379,'9300',427,'9500',972,'E60',963,'E61',970,'E62',347,'N70',921,'N71',920,'N80',951,'N90',344,'N91',919,'N92',491,'N-Gage',429,'N-Gage QD'));
return true;
}
for (i=0;i<brand_ary[id].length;i++){
phone.add(new Option(brand_ary[id][i+1],brand_ary[id][i]));
i++;}
phone.options[0].text='---请选择---';
brand.disabled = false;
phone.disabled = false;
}
}


function doAdd(obj1,obj2)
{
if (obj1.value != "")
{
for (var i=0;i<obj1.options.length ;i++ )
{
if (obj1.options[i].selected)
{
obj2.options[obj2.options.length] = new Option(obj1.options[i].text,obj1.options[i].value);
obj1.options[i] = null;
//break;
}
}
}
}

function doAddAll(obj1,obj2)
{
for (var i=obj1.options.length-1;i>=0 ;i-- )
{
if (obj1.options[i].value != "")
{
obj2.options[obj2.options.length] = new Option(obj1.options[i].text,obj1.options[i].value);
obj1.options[i] = null;
}
}
}

function WindowReturn(obj)
{
var result1 = "";
var result2 = "";
for (var i=0;i<obj.options.length ;i++ )
{
if (obj.options[i].value.replace(/s/gi,"") != "" && obj.options[i].text.replace(/s/gi,"") != "")
{
result1 += obj.options[i].text + ",";
result2 += obj.options[i].value.replace(/s/gi,"") + ",";
}
}
if (result1 != "" && result2 != "")
{
if (result1.substr(result1.length - 1,1) == ",") result1 = result1.substring(0,result1.length -1);
if (result2.substr(result2.length - 1,1) == ",") result2 = result2.substring(0,result2.length -1);
return result1 + "*" + result2;
}
else
{
return "*";
}
}


</script>
<p align="center" class="title"> </p>
<table width="90%" border="1" align="center" cellpadding="10">
<tr>
<td width="86%" height="215" valign="top" class="footer">
<p> </p>
<table width="90%" border="0">
<tr>
<td bgcolor="#999999"><div align="center"> </div></td>
</tr>
</table>
<table width="90%" border="0">
<tr>
<td bgcolor="#999999"><div align="center">
<table width="100%" border="0">
<tr>
<td width="24%"><div align="center">手机品牌</div></td>
<td width="76%"><span class="sidebarFooter">
<select name="brand" id="brand" onchange="brand_change(this.value);" style="WIDTH: 100px">
<option value="">手机品牌</option>
<option value="">----------------</option>
<OPTION value="15">诺基亚</OPTION>
</select>
</span> </td>
</tr>
</table>
</div></td>
</tr>
</table>
<table width="90%" border="0">
<tr>
<td bgcolor="#999999"><div align="center">
<table width="100%" border="0">
<tr>
<td width="24%"><div align="center">适用手机平台</div></td>
<td width="76%"><table width="100%" border="0">
<tr>
<td width="15%"><span class="sidebarFooter">
<SELECT id="phone" name="phone" multiple size="6" style="WIDTH:120px" ondblclick="doAdd(document.all.phone,document.all.sphone)">
<option value="">--请先选择品牌--</option>
<option value="1">1100</option>
<option value="2">1300</option>
<option value="3">1104</option>
</SELECT>
</span></td>
<td width="20%"> <p>
<input type="button" value="添加>>" onclick="doAdd(document.all.phone,document.all.sphone)">
<input type="button" value="全部>>" onclick="doAddAll(document.all.phone,document.all.sphone)">
<input type="button" value="<<删除" onclick="doAdd(document.all.sphone,document.all.phone)">
<input type="button" value="<<全部" onclick="doAddAll(document.all.sphone,document.all.phone)">
</p></td>
<td width="65%"><p>
<select name="sphone" id="sphone" ondblclick="doAdd(document.all.sphone,document.all.phone)" multiple="multiple" size="6" style="WIDTH:120px">
</select>
</p></td>
</tr>
</table>
<span class="sidebarFooter"> </span> </td>
</tr>
</table>
</div></td>
</tr>
</table>
<table width="90%" border="0">
<tr>
<td bgcolor="#999999"> </td>
</tr>
</table>
<table width="90%" border="0">
<tr>
<td bgcolor="#999999"> </td>
</tr>
</table>
<p align="center"> </p></td>
</tr>
</table>
发表评论：
天涯博客欢迎您！