how to hide and show text box according to select value using jquery

i want to hide and show my text box according to drop down select value. if user select drop down value "other" then i want show my text box and hide drop down list and he can select any value except other my text box is hide plz help me and give me sample开发者_如何学运维 code my code is here

 <script type="text/javascript">
  $( function () {

 if($("#subject").val()==="Other") {
     $("#Sub").show();
  $("#subject").hide();

  }
  else $("#Sub").hide(); 
    });

  <tr> <td style="width: 470px"><%:Html.DropDownList("subject",ViewData["sub"] as SelectList) %> 

      <input type ="text"  name="subject" id="Sub"style="width: 250px" /></td></tr>

i populated drop down list from data base

To do this you must attach an event on "change" event of the select (and hide the text input first). try this:

$("#Sub").hide();
$("#subject").change(function(){
    if ($(this).val() === "Other"){
        $("#Sub").show(); 
        $("#subject").hide();
    }else{
        $("#Sub").hide();
    }
});

try this

  <tr> <td style="width: 470px"><%:Html.DropDownList("subject",ViewData["sub"] as SelectList,new {onchange="ShowHideTextBox()"}) %> 

  <input type ="text"  name="subject" id="Sub" style="width: 250px" /></td></tr>

javascript

  <script type="text/javascript">
function ShowHideTextBox() {

    if($("#subject").val().toUpperCase()=="OTHER") {
         $("#Sub").show();
         $("#subject").hide();
    }
    else
    {
       $("#Sub").hide(); 
    } 
}
</script>