Show & Hide Div When Certain Select Option Detected

A div with two textboxes will be hidden on dom ready. When jQuery detects that a specific option in a select element is selected, the div should show, otherwise the div should be hidden

HTML

<div id="movieAddDirector">
  <label for="ddlMovieAddDirector">Director:</label>
  <br />
  <select type="select" id="ddlMovieAddDirector" name="ddlMovieAddDirector">
    <option id="optMovieAddDirectorDefault" value="">Select a Director...</option>
    <option id="optMovieAddDirectorNew" value="">Add a New Director Below</option>
  </select>
  <br />
  <div id="movieAddNewDirector">
    <label id="lblMovieAddDirector">Add a New Director:</label>
    <br />
    <label for="txtMovieAddNewDirectorFirstName">First Name:</label>
    <input type="text" name="txtMovieAddNewDirectorFirstName"
    id="txtMovieAddNewDirectorFirstName" size="20" />
    <br />
    <label for="txtMovieAddNewDirectorLastName">Last Name:</label>
    <input type="text" name="txtMovieAddNewDirectorLastName"
    id="txtMovieAddNewDirectorLastName" size="20" />
  </div>
</div>

JavaScript

$('#movieAddNewDirector').hide();

$('#ddlMovieAddDirector').change(function () {
  var id = $(this).find('option:selected').attr('id');

 // alert('id: ' + id);

  if (id == 'optMovieAddDirectorNew') {
   // alert('attempting to show new director div');
    $('#movieAddNewDirector').show();
  } else {
    //alert('id didn\'t match - id: ' + id);
    $('#movieAddNewDirector').hide();
  }
});