Geek Answers Handbook

Show hidden div when selecting an option

For life, I cannot understand what I am missing.

In this jsFiddle , I hide a div with two text fields on dom ready. I want to show the div when a specific option is selected from the drop-down list.

Here is the div that is 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 is the corresponding 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(); } });

"id does not match" is always displayed, even if, when you select the second option, the first warning that displays the detected identifier shows the correct identifier that the div should display!

I know that I have an ID in jQuery, but I do not understand why this will not work. I have something very similar for selecting a radio button showing / hiding a div.

Any help would be greatly appreciated!

+4
source share
1 answer

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

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

Icon

"#" is not part of the identifier, it is used only to search for identifiers in selectors

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

+7
source

More articles:


All Articles