Question

I have a form to add contacts into a database, which has a select menu to list companies. When a company is selected I would like the hidden title input field to display so users can enter a title of the person they are adding to the company. If no company is selected value=”0″ i would like the title input hidden. Thanks

<label for="company">Company</label>
<select  id="company-name" name="company" class="iselect">
  <option selected="selected" value="0">-- Select company --</option>
  <option value="1">Company1</option>
  <option value="2">Company2</option>
  <option value="3">Company3</option>
  <option value="4">Company4</option>
</select>
or <a onClick="$('#add-contact').hide(0);$('#add-company').show(0);return false;"  href="#">add new company </a>
</li>
<li style="display:none;"id="title">
  <label for="title">Title</label>
  <input type="text" id="title" name="title" class="itext">
</li>

Answer 1

You can do it by hooking up the change event. jQuery has a convenient overload for the toggle method which shows or hides an element where you can write the show condition inline:

$("#company-name").change(function() {
    $("#title").toggle($(this).val() != 0);
});