Question

我正在尝试制作一系列3个下拉框，而不是用户滚动浏览物种列表，他们可以使用下拉框轻松导航。因此，如果用户点击两栖动物，他们可以选择青蛙和海龟，然后选择物种，如果用户点击爬行动物，他们会看到不同种类的爬行动物。一旦他们选择了一个物种，他们就会点击提交或转到按钮，然后将它们带到特定的物种页面。

所以我真的希望该选项改变按钮的动作。到目前为止，我有这个。

<script>
function DisableSelectOne()
{
document.getElementById("SelectOne").disabled=true;

}
</script>
    <script>
function EnableSelectOne()
{
document.getElementById("SelectOne").disabled=false;

}
</script>


<script type="text/javascript">
var SelectOne=[
["Select One"],
["Select One","Red Eyed Tree Frog","Bull Frog"],
["Select One","Red Eared Slider"]
];

function Box3(idx) {
var f=document.myform;
f.box3.options.length=null;
for(var i=0; i<SelectOne[idx].length; i++) {
    f.box3.options[i]=new Option(SelectOne[idx][i], i); 
    }    
}
</script>

<script type="text/javascript">
var SpeciesNSub=[
["Select One",
 "Frogs",
 "Turtles"],


["Select One",
 "Chinese Water Dragon","Green Iguana",
 "Frilled Lizard"]
];

function Box2(idx) {
var f=document.myform;
f.box2.options.length=null;
for(var i=0; i<SpeciesNSub[idx].length; i++) {
    f.box2.options[i]=new Option(SpeciesNSub[idx][i], i); 
    }    
}
</script>

</head>
<center>
<body onload="Box2(0);Box3 (0)">
<form name="myform" method="post">
<fieldset>
<select Id="box1" name="box1" onchange="Box2(this.selectedIndex)">
    <option  value="Amphibians">Amphibians</option>
    <option  value="Reptiles">Reptiles</option>
</select>

<select name="box2" onchange="Box3(this.selectedIndex)">  
 <option value="Frogs" >Frogs</option>
 <option value="Turtles">Turtles</option>
 <option value="CWD">Chinese Water Dragon</option>
 <option value="GreenIggy">Green Iguana</option>
 <option value="Frilled">Frilled Lizard</option>
</select>

<select style="" id="box3" name="box3" id="SelectOne">

</select>
<button  id="CareSearch" type="button"></button> 
</fieldset>
</form>
</center>

<?php
if(empty($_POST['SelectOne'])) {
    // User did not select a brand
}
header('Location: http://www.ReptiGuru.zzl.org' . urlencode($_POST['Frilled']));
exit();
?>


<script type="text/javascript">
document.getElementById('box1').addEventListener('change', function() {
   if(this.selectedIndex != 0) {
       document.getElementById('box3').disabled = true;
   }
   else {
       document.getElementById('box3').disabled = false;
   }
});
</script>

如何使用<select> <option>？</option> </select>对按钮执行多个操作

0 个答案: