CODEWITHSUNDEEP
jqueryshow-hide
marky
marky

Reputation: 5068

Show a hidden div when option selected

I can't for the life of me figure out what I'm missing.

In this jsFiddle, I'm hiding a div with two textboxes on dom ready. I want to show the div when a particular option is selected in a dropdown.

Here's the div that's being hidden/shown:

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

Here's the relevant jQuery code

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

The "id didn't match" always shows, even though when the second option is selected the first alert displaying the detected id shows the correct id that should display the div!

I know I have the IDs right in the jQuery, but I can't see why this won't work. I have something very similar working for a radio button selection showing/hiding a div.

Any help would be greatly appreciated!

Upvotes: 4

Views: 227

Answers (1)

jorgehmv
jorgehmv

Reputation: 3713

change if (id == '#optMovieAddDirectorNew') {

to this: if (id == 'optMovieAddDirectorNew') {

"#" sign is not part of the id, it's only used to look for ids in selectors

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

Upvotes: 7

Related Questions