Javascript 显示基于onchange from下拉选项的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>

图书期权
艺术
艺术
向我展示

---

有什么方法可以解决这个问题吗？

看起来您使用的是jquery，所以我首先建议从html/php中删除所有javascript，并将其放在单独的部分或文件中

然后，您可以简单地执行以下操作：

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

另外，

#show_details

的html似乎是错误的：

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

没有有效的样式声明。

我认为

没有注册

onchange

事件。相反，您需要使用其父级

来定义更改事件

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

函数showDiv（）
{
//隐藏任何表演
$（“.details\u div”）。每个（函数（）{
$（this.css（'display'，'none'）；
});
//我们的目标
var target=“#详细信息”+$（“#测试_选择”）.val（）；
//它存在吗？
如果（$（目标）.length>0）
{
//表现出来
$（target.css（'display'，'block'）；
}
}
$（文档）.ready（函数（）{
//绑起来
$（“#测试_选择”）。更改（函数（）{
showDiv（）；
});
//自动运行它
showDiv（）；
});
.详情
{
显示：无；
}
{/literal}
-选择-
书
电影
书籍详情
电影细节

您是否只是想在选择任何内容时显示

#show_details

的内容？或者它的内容应该根据所选内容进行更改吗？@Michael我正在尝试显示

#show_details

的内容，如果有

！omc11知道了-我相应地更新了我的答案。谢谢你，我会先试试，有结果我会来的。是的。。。但是我想显示的div内容的值是
art
而不是
-1
，例如
选择某个“所以当我转到
value='art'或被选中时，内容应该是可见的，否则不可见，thanks@Josh，它看起来很漂亮，细节更详细，我很感激，所以我也会试试这个，带着报告来找你们。thanks@omc11：没问题，您应该能够将其放入.html文件中并运行它，显然要确保在顶部包含jQuery。一旦它起作用，您就可以将PHP包装到框架上。只需注意div有一个特定的命名约定。@Josh，现在我有了结果，无论何时我进入
书籍详细信息
，它都可以正常工作，但当它被选中时（意思是保存后，页面刷新），它就会消失，我希望它在被选中时出现，thanks@omc11：我已经更新了，确保您的PHP相应地填充selected=“selected”。不。。这也许是我的错，但请让我知道
style=“'display:block；”：'display:none；”的样式声明的正确性。
谢谢
<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>

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