I am trying to connect my three drop downs, so when any selection is made in the first, the second appears. Then when any selection is made in the second, the third appears. Basically, the next drop down will only appear if a selection in the one prior is made. I understand how to use if statements so when a specific selection within the drop down is made, the next drop down will appear. I don't know how to alter the if statement so that when any selection is made, the next drop down will appear. I want to do this in Javascript not JQuery. Thanks so much for your help.
<!DOCTYPE html>
<html>
<head>
<title>Experiment</title>
<style type="text/css">
table,td{margin-left: auto;margin-right: auto;padding-top: 5px;padding-bottom: 5px;}
.display {display: flex;align-items: center;justify-content: center;}
p {text-align: center;}
textarea {display: block;margin-left:auto;margin-right: auto;}
.chosen-select {width:200px}
</style>
<script>
function hide() {
document.getElementById("t3").style.display = "none";
document.getElementById("t4").style.display = "none";
}
function titleOne(){
if (document.getElementById("t2").value == "clean") {
document.getElementById("t3").style.display = "block";
}
}
</script>
<body onload="hide()">
<table>
<tr>
<td>
<span onclick="titleOne()">
<select id="t2">
<option value="" disabled selected>Title</option>
<option value="clean">Clean</option>
<option value="salvage">Salvage</option>
<option value="rebuilt">Rebuilt</option>
</select>
</span>
</td>
<td id="t3">
<select>
<option value="" disabled selected>Title Status</option>
<option value="in hand">In Hand</option>
<option value="lien">Lien</option>
<option value="missing">Missing</option>
</select>
</td>
<td id="t4">
<select>
<option value="" disabled selected>Title Status</option>
<option value="in hand">In Hand</option>
<option value="lien">Lien</option>
<option value="missing">Missing</option>
</select>
</td>
</tr>
<tr>
</table>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire