show dropdown2 when option in dropdown1 is selected

[nadiam]

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

[eburlea]

Does it help you?

<select name="table-type" id="select-t">
    <option value="" disabled selected>Types of Tables</option>
    <option value="seat-r">Round Table</option>
    <option value="seat-b">Banquet Table</option>
    <option value="seat-s">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" id="seat-r" style="display: none;">
    <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" id="seat-b" style="display: none;">
    <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" id="seat-s" style="display: none;">
    <option value="" disabled selected></option>
    <option value="6">6</option>
    <option value="8">8</option>
</select>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#select-t').unbind().bind('change',function(){
        var elemId = $(this).val();
        showElement(elemId);
        $("#inform").hide();
    });
    function showElement(id){
        $('.seat').each(function(){
            if($(this).attr('id') == id){
                $(this).show();
            } else {
                $(this).hide();
            }
        });
    }
});
</script>

[nadiam]

this is the code im using; got help of course:

<script type="text/javascript">
  var currentObj; // global
  $("#select-t").change( function() { 
     var thisVal=$(this).find("option:selected").val();
     if(thisVal == "0"){$("#inform").show(); }
     if(currentObj){ currentObj.hide(); }
     $("#inform").hide(); 
     var thisObj=$("#"+thisVal);    
     thisObj.show();      
     currentObj=thisObj; 
   });  
</script>



<div id="wrappers">
                <div class="lftF">
                    <select name="table-type" id="select-t" require>
                        <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" require>
                        <option value="" selected disabled>Select number of seats</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" require>
                    <option value="" selected disabled>Select number of seats</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" require>
                    <option value="" selected disabled>Select number of seats</option>
                    <option value="6">6</option>
                    <option value="8">8</option>
                    </select>
                </div>
                <div>
                    <input id="inform" type="text" value="Select Table" size="10" readonly>
                </div>
            </div>
            <input type="submit" name="done" id="done" value="Done">