Show the div base on onchange from the dropdown menu, help

Question

I am trying to show some information inside a <div> as follows:

  <div id="show_details" style="'display:block;' : 'display:none;'"> SHOW me </div> 

choosing from a drop-down list for example.

  <?php if ($books == 'art') { ?> <option value="art" selected="selected" id="art_indicator" onchange="(this.selected) ? $('#show_details').css('display','block') : $('#show_details').css('display','none');">Art</option> <?php } else { ?> <option value="art" id="art_indicator" onchange="(this.selected) ? $('#show_details').css('display','block') : $('#show_details').css('display','none');">Art</option> <?php } ?> 

and the full code as shown below

  <tr> <td>Book Option</td> <td> <select name="books"> <?php foreach ($others as $other) { ?> <?php if ($other == $other['other']) { ?> <option value="<?php echo $other['other']; ?>" selected="selected"><?php echo $other['title']; ?></option> <?php } else { ?> <option value="<?php echo $other['other']; ?>"><?php echo $other['title']; ?></option> <?php } ?> <?php } ?> <?php if ($books == 'art') { ?> <option value="art" selected="selected" id="art_indicator" onchange="(this.selected) ? $('#show_details').css('display','block') : $('#show_details').css('display','none');">Art</option> <?php } else { ?> <option value="art" id="art_indicator" onchange="(this.selected) ? $('#show_details').css('display','block') : $('#show_details').css('display','none');">Art</option> <?php } ?> </select></td> </tr> <div id="show_details" style="'display:block;' : 'display:none;'"> SHOW me </div> 

Is there any way to fix this?

Answer 1

 <script type="text/javascript"> function showDiv() { // hide any showing $(".details_div").each(function(){ $(this).css('display','none'); }); // our target var target = "#details_" + $("#test_select").val(); // does it exist? if( $(target).length > 0 ) { // show it $(target).css('display','block'); } } $(document).ready(function(){ // bind it $("#test_select").change(function(){ showDiv(); }); // run it automagically showDiv(); }); </script> <style> .details_div { display:none; } </style> {/literal} <select id="test_select"> <option value="">- Select - </option> <option value="book" selected="selected">Books</option> <option value="movie">Movie</option> </select> <div id="details_book" class="details_div">BOOK DETAILS</div> <div id="details_movie" class="details_div">MOVIE DETAILS</div> 

Answer 2

It sounds like you are using jquery, so I would suggest first removing all javascript from html / php and putting it in a separate section or file.

Then you can just do things like:

 $("#art_indicator").change(function() { // do what you want to do }); 

Also, the html for #show_details seems to be wrong:

 style="'display:block;' : 'display:none;'" 

is not a valid style declaration.

Answer 3

I don't think <option> logging an onchange event. Instead, you should use the parent <select onchange=''> to define the change event.

 <script type='text/javascript'> function selOnChange() { if ($('#selectList').value == "art" { $("#show_details").css('display', 'block'); } else { $("#show_details").css('display', 'none'); } } 

Now you need to have the option "unselected" by default. I have it here with the value = "- 1" When the selection list changes, if its value is the value #art_indicator , a div will be shown. otherwise, the div will not be displayed.

 <select id='selectList' name="books" onchange="selOnChange()"> <option value="-1">Select something</option> <option id="#art_indicator" value="art">Art choice...</option> <?php // list all your other options ?> </select>