Montrer div de base sur le onchange de liste déroulante de l'option, de l'aide

J'essaie de montrer quelques informations à l'intérieur de <div> comme suit:

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

par choisir à partir de la liste déroulante de l'option par exemple

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

et le code suivant,

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

Est-il un moyen de résoudre ce problème?

Etes-vous en essayant de montrer le contenu de #show_details chaque fois que quelque chose est sélectionné? Ou est son contenu supposé de changer en fonction de ce qui est sélectionné?
Je suis en train d'afficher le contenu de <div> #show_details quand jamais <option value="art" id="art_indicator"sélectionné uniquement, merci
!omc11 Eu - j'ai mis à jour ma réponse en conséquence.

OriginalL'auteur omc11 | 2011-02-25

  1. 2
    <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>
    c'est très joli et plus de détails, je vous remercie, je vais donc essayer cela aussi, et venir à vous avec rapport. merci
    Pas de problème, vous devriez être en mesure de les déposer dans un .html fichier et de l'exécuter, évidemment, assurez-vous d'inclure jQuery dans la partie supérieure. Une fois que cela fonctionne, vous pouvez l'envelopper PHP autour du squelette. Il suffit de noter les divs ont une convention de nommage spécifique.
    maintenant, j'ai le résultat, c'est du bon travail, chaque fois que je vais à <div id="details_book" class="details_div">BOOK DETAILS</div> mais quand jamais il sélectionnées (moyenne après avoir enregistré puis la page actualisé) il disparait, et je veux qu'il apparaisse lorsque jamais sélectionné, merci
    Je l'ai mis à jour, assurez-vous de assurez-vous que votre PHP remplit la selected="selected" en conséquence.
    c'est super, merci beaucoup,

    OriginalL'auteur Josh

  2. 0

    On dirait que vous êtes à l'aide de jquery donc je voudrais tout d'abord proposer de supprimer tous les javascript dans le html /php et de le mettre dans une section distincte ou d'un fichier.

    Vous pouvez simplement faire des trucs comme:

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

    Aussi, le code html #show_details semble être erronée:

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

    est pas valide déclaration de style.

    nah.. c'est peut-être mon mauvais, mais s'il vous plaît laissez-moi savoir la coorect de la déclaration de style de style="'display:block;' : 'display:none;'" merci

    OriginalL'auteur jeroen

  3. 0

    Je ne pense pas que <option> registres de la onchange événement. Ce que vous voulez, au contraire, est d'utiliser son parent <select onchange=''> pour définir l'événement de changement.

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

    Maintenant, vous devez avoir une valeur par défaut de "non sélectionné" option. J'ai ici avec la valeur="-1"
    Lorsque la liste de sélection changements, si sa valeur est la valeur de #art_indicator, la div sera affiché. sinon, la div ne s'affiche pas.

    <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>
    merci pour cela, je vais essayer de le premier et je reviens quand j'ai le résultat.
    Ouais... mais la valeur de ce que je veux montrer div contenu est art pas -1, par exemple <option value="art">Select something</option>' so when ever i go to value=' "art" ou est sélectionné, le contenu doit être visible autrement invisible, merci
    IC,je Vous remercie...

    OriginalL'auteur Michael Berkowski