Show dropdown2 when option in dropdown1 is selected

JavaScript
1

hey guys. im trying to show a dropdown list and hide input text when an option in another drop down list is selected.

dropdown


<select name="table-type" id="select-t">
    <option value="" disabled selected>Types of Tables</option>
    <option value="Round Table" id="rt">Round Table</option>
    <option value="Banquet Table" id="bt">Banquet Table</option>
    <option value="Square Table" id="st">Square Table</option>
</select><br>
No. of seats : <br>
<input type="text" readonly placeholder="Select Table" size="8" id="inform" />
<select name="seatno" class="seat-r" id="seat-r">
    <option value="" selected disabled>No. of seats</option>
    <option value="6">6</option>
    <option value="8">8</option>
    <option value="10">10</option>
    <option value="12">12</option>
</select>
<select name="seatno" class="seat-b" id="seat-b">
    <option value="" disabled selected>No. of seats</option>
    <option value="6">6</option>
    <option value="8"></option>
    <option value="10"></option>
</select>
<select name="seatno" class="seat-s" id="seat-s">
    <option value="" disabled selected></option>
    <option value="6">6</option>
    <option value="8">8</option>
</select>

jquery


<script type="text/javascript>">
$("#select-t").change(function() {
if ($(this).find("option:selected").attr("id") == "rt")
{
 $("#seat-r").show();
 $("#inform").hide();
}
if ($(this).find("option:selected").attr("id") == "bt")
{
 $("#seat-b").show();
 $("#inform").hide();
}
if ($(this).find("option:selected").attr("id") == "st")
{
 $("#seat-s").show();
 $("#inform").hide();
});
</script>

but the script doesn’t seem to be working. nothing happens when an option from select-t is selected. the dropdown lists are hidden in css visibility:hidden. is it because of that?

thanks in advance

2

You had a couple of typos in your script which contributed to your problems. I have made some changes so that you can eliminate the duplication in your script. If you see two or more lines looking the same then there is usually a way to reduce them to one.

If you look at my script you will see that I have changed the values in the div id=“select-t”. The options values are now those you need to target the drop downs directly (id=“rt”, id=“bt”, id=“st”). My script no longer uses the .attr(“id”), but the .val() of the select element instead. This allows you to target any of the drop downs with the same piece of code. I am also using a global variable to store the current drop down object so that you can remove it when the next one is selected.

When you get around to using the application you might like to simplify it further by using the text, rather than the value in the number of seats drop downs. There is no point in duplicating the numbers as it takes more typing. :slight_smile:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Show-Hide</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<style type="text/css">
body { font-family:arial, helvetica, sans-serif; font-weight:normal; font-size:13px; color:#000; text-align:left; margin:3px 0px; }
#wrap { width:600px; height:200px; margin:20px;  }
</style>
<style type="text/css">
 select { width:200px; } 
 .lftF { float:left; margin-right:20px; }
 #rt, #bt, #st { display:none; }
</style>
</head>

<body>

<div id="wrap">
  <div class="lftF">
    <select name="table-type" id="select-t">
    <option value="0">Types of Tables</option>
    <option value="rt">Round Table</option>
    <option value="bt">Banquet Table</option>
    <option value="st">Square Table</option>
    </select></div>
  <div class="lftF">
    <select name="seatsRt" id="rt">
    <option>Seats Round Table</option>
    <option value="6">6</option>
    <option value="8">8</option>
    <option value="10">10</option>
    <option value="12">12</option>
    </select></div>
  <div class="lftF">
    <select name="seatsBt" id="bt">
    <option>Seats Banquet Table</option>
    <option value="6">6</option>
    <option value="8">8</option>
    <option value="10">10</option>
    </select></div>
  <div class="lftF">
    <select name="seatsSt" id="st">
    <option>Seats Square Table</option>
    <option value="6">6</option>
    <option value="8">8</option>
    </select></div>
  <div>
    <input id="inform" type="text" value="Select Table" size="20" readonly></div>
</div>
<script type="text/javascript">
  var currentObj; // global
  $("#select-t").change( function() { 
     var thisVal=$(this).find("option:selected").val();
     if(thisVal==0){return; }
     if(currentObj){ currentObj.hide(); }
     $("#inform").hide(); 
     var thisObj=$("#"+thisVal);    
     thisObj.show();      
     currentObj=thisObj; 
   });  
</script>

</body>

</html>
3

thanks alot allan. :slight_smile: that makes it simpler and easier.