Показать базу div на опцию onchange from dropdown, помогите

Question

Я пытаюсь показать некоторую информацию внутри <div> следующим образом:

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

выбрав из выпадающего меню, например,

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

и полный код следующим образом,

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

Есть ли способ исправить это?

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

Я не думаю, что <option> регистрирует событие onchange.Вместо этого вы хотите использовать его родительский <select onchange=''> для определения события изменения.

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

Теперь вам нужно иметь опцию «невыбранный» по умолчанию.У меня это здесь со значением = "- 1" Когда список выбора изменится, если его значение равно #art_indicator, будет показан div.в противном случае, div не будет показан.

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

Answer 3

Похоже, вы используете jquery, поэтому я бы сначала предложил удалить весь javascript из html / php и поместить его в отдельный раздел или файл.

Затем вы можете просто сделать что-то вроде:

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

Кроме того, HTML-код для #show_details представляется неправильным:

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

не является допустимым объявлением стиля.