Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

I try to show some information inside of <div> as following:

    <div id="show_details" style="'display:block;' : ';'"> SHOW me
by choose from drop down option e.g. 
         <?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 following,
      <td>Book Option</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>
    <div id="show_details" style="'display:block;' : ';'"> SHOW me
Is there some way to fix this?
                Are you just trying to show the contents of #show_details whenever anything is selected? Or is its contents supposed to change based on what is selected?
– Michael Berkowski
                Feb 25, 2011 at 17:55
                @Michael I am trying to show content of <div> #show_details when ever <option value="art" id="art_indicator"only selected, thanks
– omc11
                Feb 25, 2011 at 18:32
<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>
                @Josh, it's look very nice and more details, I appreciate it, so I will try this also and come to you with report. thanks
– omc11
                Feb 25, 2011 at 18:38
                @omc11: No problem, you should be able to drop it in a .html file and run it, obviously making sure you include jQuery at the top. Once it works you can wrap PHP around the skeleton. Just note the divs have a specific naming convention.
– Josh
                Feb 25, 2011 at 18:40
                @Josh, now I have the result, it's work fine whenever i go to <div id="details_book" class="details_div">BOOK DETAILS</div> but when ever it as selected (mean after saved it then page refreshed) it disapear, and i want it appear when ever as selected, thanks
– omc11
                Feb 25, 2011 at 19:07
                @omc11: I've updated it, be sure to make sure your PHP populates the selected="selected" accordingly.
– Josh
                Feb 25, 2011 at 19:28
It looks like you're using jquery so I would first suggest to remove all javascript from the html / php and put it in a separate section or file.
You can then simply do stuff like:
$("#art_indicator").change(function() {
  // do what you want to do  
Also, the html for #show_details seems to be wrong:
style="'display:block;' : ';'"
is no valid style declaration.
                nah.. that's it perhaps my bad, but please let me know the coorect of style declaration of style="'display:block;' : ';'" thanks
– omc11
                Feb 25, 2011 at 18:41
I don't think <option> registers the onchange event.  What you want instead is to use its 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 a default "unselected" option. I have it here with value="-1"
When the select list changes, if its value is the value of #art_indicator, the div will be shown.  otherwise, the div will not be shown.
<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>
                Yeah... but the value of that I want to show div content is art not -1, e.g. <option value="art">Select something</option>' so when ever i go to value='art'` or is as selected then the content should be visible otherwise invisible, thanks
– omc11
                Feb 25, 2011 at 19:01
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.