选择选项时显示隐藏的div

Question

我不能为我的生活找出我所缺少的东西.

在这个jsFiddle中,我正在隐藏一个带有两个文本框的div在dom上准备好了.我想在下拉列表中选择特定选项时显示div.

这是隐藏/显示的div:

<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>

这是相关的jQuery代码

$('#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();
    }
});

始终显示"id not match",即使选择了第二个选项,显示检测到的id的第一个警报显示应显示div的正确ID!

我知道我在jQuery中有正确的ID,但我不明白为什么这不起作用.我有一些非常相似的工作,用于显示/隐藏div的单选按钮选择.

任何帮助将不胜感激!

Answer 1

更改 if (id == '#optMovieAddDirectorNew') {

对此: if (id == 'optMovieAddDirectorNew') {

"#"符号不是id的一部分,它只用于在选择器中查找id

和JSfiddle http://jsfiddle.net/BG4Dg/1/