下拉条的连动(36)

最新推荐文章于 2024-09-27 09:37:38 发布

firefly_shine

最新推荐文章于 2024-09-27 09:37:38 发布

阅读量276

点赞数

分类专栏： web学习文章标签： html Html HTML javascript JavaScript Javascript javaScript web Web WEB

web学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

Title:下拉条的连动
Description:
@Copyright:
@Company:
@autor:firefly
@version:1.0
@time:2012.12.27

<html>
<head>
<title>businessSell</title>
</head>

<body onLoad="changeDrop2()">
<script LANGUAGE="JavaScript">
function changeDrop2() {
if (document.form.Drop1.selectedIndex == 0) {
document.form.Drop2.length = 1;                    //Drop2的下拉条只有一个
document.form.Drop1.selectedIndex = 0
document.form.Drop2.selectedIndex = 0       //Drop2默认选中第0个
document.form.Drop2.options[0].text = "No Product Selected";   //Drop2的第0个选项显示出来的名字是No Product Selected.
document.form.Drop2.options[0].value = "No Product Selected";
}
if (document.form.Drop1.selectedIndex == 1) {
document.form.Drop2.length = 9;
document.form.Drop2.selectedIndex = 0
document.form.Drop2.options[0].text = "Select Model";
document.form.Drop2.options[0].value = "Select Model";
document.form.Drop2.options[1].text = "Celebrity";
document.form.Drop2.options[1].value = "Celebrity";
document.form.Drop2.options[2].text = "Legend";
document.form.Drop2.options[2].value = "Legend";
document.form.Drop2.options[3].text = "Sundancer";
document.form.Drop2.options[3].value = "Sundancer";
document.form.Drop2.options[4].text = "SideKick";
document.form.Drop2.options[4].value = "SideKick";
document.form.Drop2.options[5].text = "Rally";
document.form.Drop2.options[5].value = "Rally";
document.form.Drop2.options[6].text = "Shuttle";
document.form.Drop2.options[6].value = "Shuttle";
document.form.Drop2.options[7].text = "Dynamo";
document.form.Drop2.options[7].value = "Dynamo";
document.form.Drop2.options[8].text = "XL";
document.form.Drop2.options[8].value = "XL";
}
if (document.form.Drop1.selectedIndex == 2) {
document.form.Drop2.length = 8;
document.form.Drop2.selectedIndex = 0
document.form.Drop2.options[0].text = "Select model";
document.form.Drop2.options[0].value = "Select Model";
document.form.Drop2.options[1].text = "1100";
document.form.Drop2.options[1].value = "1100";
document.form.Drop2.options[2].text = "1103";
document.form.Drop2.options[2].value = "1103";
document.form.Drop2.options[3].text = "1105";
document.form.Drop2.options[3].value = "1105";
document.form.Drop2.options[4].text = "1115";
document.form.Drop2.options[4].value = "1115";
document.form.Drop2.options[5].text = "1120";
document.form.Drop2.options[5].value = "1120";
document.form.Drop2.options[6].text = "1170";
document.form.Drop2.options[6].value = "1170";
document.form.Drop2.options[7].text = "1400";
document.form.Drop2.options[7].value = "1400";
}
if (document.form.Drop1.selectedIndex == 3) {
document.form.Drop2.length = 12;
document.form.Drop2.selectedIndex = 0
document.form.Drop2.options[0].text = "Select Model";
document.form.Drop2.options[0].value = "Select Model";
document.form.Drop2.options[1].text = "TMR48";
document.form.Drop2.options[1].value = "TMR48";
document.form.Drop2.options[2].text = "TMR49";
document.form.Drop2.options[2].value = "TMR49";
document.form.Drop2.options[3].text = "TMR348";
document.form.Drop2.options[3].value = "TMR348";
document.form.Drop2.options[4].text = "TMR329";
document.form.Drop2.options[4].value = "TMR329";
document.form.Drop2.options[5].text = "TMR540";
document.form.Drop2.options[5].value = "TMR540";
document.form.Drop2.options[6].text = "TMR360";
document.form.Drop2.options[6].value = "TMR360";
document.form.Drop2.options[7].text = "TMR470";
document.form.Drop2.options[7].value = "TMR470";
document.form.Drop2.options[8].text = "TMR570/571";
document.form.Drop2.options[8].value = "TMR570/571";
document.form.Drop2.options[9].text = "TMR580";
document.form.Drop2.options[9].value = "TMR580";
document.form.Drop2.options[10].text = "TMR670";
document.form.Drop2.options[10].value = "TMR670";
document.form.Drop2.options[11].text = "TMR560";
document.form.Drop2.options[11].value = "TMR560";
}
if (document.form.Drop1.selectedIndex == 4) {
document.form.Drop2.length = 3;
document.form.Drop2.selectedIndex = 0
document.form.Drop2.options[0].text = "Select Model";
document.form.Drop2.options[0].value = "Select Model";
document.form.Drop2.options[1].text = "Wrangler";
document.form.Drop2.options[1].value = "Wrangler";
document.form.Drop2.options[2].text = "Hurricane";
document.form.Drop2.options[2].value = "Hurricane";
}
if (document.form.Drop1.selectedIndex == 5) {
document.form.Drop2.length = 3;
document.form.Drop2.selectedIndex = 0
document.form.Drop2.options[0].text = "Select Model";
document.form.Drop2.options[0].value = "Select Model";
document.form.Drop2.options[1].text = "2000";
document.form.Drop2.options[1].value = "2000";
document.form.Drop2.options[2].text = "3000";
document.form.Drop2.options[2].value = "3000";
}

}

function goThere() {
if (document.form.Drop1.selectedIndex == 0) {
alert("Please Select a Product");
} else {
if (document.form.Drop2.selectedIndex == 0) {
  alert("Please Select a Model");
  } else {
  var list1 = document.form.Drop1;
  var list2 = document.form.Drop2;
  var theDIR = list1.options[list1.selectedIndex].value;
  var theProduct = document.form.Drop2.options[list2.selectedIndex].value;
  location.href = "http://www.YourLinkHere.com/" + theDIR + "/" + theProduct + ".htm";
  }
}
}

</script>

<form name="form">
<p><select name="Drop1" onChange="changeDrop2()" size="1">
    <option selected value="Select A Product">Select A Product</option>
    <option value="Scooters">Scooters</option>
    <option value="Jazzy">Jazzy</option>
    <option value="LiftChairs">Lift Chairs</option>
    <option value="PMVs">PMV's</option>
    <option value="Hercules">Hercules</option>
</select><br>
<select name="Drop2" size="1">
    <option value=" ">-----------------------------</option>
    <option value=" ">-----------------------------</option>
    <option value=" ">-----------------------------</option>
    <option value=" ">-----------------------------</option>
    <option value=" ">-----------------------------</option>
    <option value=" ">-----------------------------</option>
    <option value=" ">-----------------------------</option>
    <option value=" ">-----------------------------</option>
    <option value=" ">-----------------------------</option>
    <option value=" ">-----------------------------</option>
    <option value=" ">-----------------------------</option>
    <option value=" ">-----------------------------</option>
    <option value=" ">-----------------------------</option>
    <option value=" ">-----------------------------</option>
    <option value=" ">-----------------------------</option>
    <option value=" ">-----------------------------</option>
    <option value=" ">-----------------------------</option>
    <option value=" ">-----------------------------</option>
    <option value=" ">-----------------------------</option>
</select><br>
<input type="button" onClick="goThere()" value="GOTO Product Page" name="B1"></p>
</form>