根据下拉菜单中的选择更改div的内容 [英] Change the content of a div based on selection from dropdown menu

问题描述

是否有一种简单的方法，使用JavaScript，根据用户从下拉菜单中的选择动态显示/隐藏< div> 中的内容？例如，如果用户选择选项1 ，那么我会显示< div> 1并且所有其他< div> s被隐藏。

编辑：例子 HTML Setup

 < select> 
< option>选项1< / option> 
< option>选项2< / option> 
< option>选项3< / option> 
< select> 
 
< div id =content_1style =display：hidden;>内容1< div> 
< div id =content_2style =display：hidden;>内容2< div> 
< div id =content_3style =display：hidden;> Content 3< div> 
  

解决方案

这里是一个jsfiddle ，其中有一个通过select显示/隐藏div的例子。

HTML：

 < div id =option1class =group> asdf< / div> 
< div id =option2class =group> kljh< / div> 
< div id =option3class =group> zxcv< / div> 
< div id =option4class =group> qwerty< / div> 
< select id =selectMe> 
< option value =option1> option1< / option> 
< option value =option2> option2< / option> 
< option value =option3> option3< / option> 
< option value =option4> option4< / option> 
< / select> 
  

jQuery：

 < code $ $（document）.ready（function（）{
 $（'。group'）。hide（）; 
 $（'＃option1'）。show（）; 
 $（'＃selectMe'）。change（function（）{
 $（'。group'）。hide（）; 
 $（'＃'+ $（this）.val（） ）.show（）; 
}）
}）; 
  

Is there a simple way, using JavaScript, to dynamically show/hide content in a <div> based on the users selection from a drop down menu? For example, if a user selects option 1 then I would like <div> 1 to be displayed and all other <div>s to be hidden.

EDIT: Example HTML Setup

<select>
<option> Option 1</option>
<option> Option 2</option>
<option> Option 3</option>
<select>

<div id="content_1" style="display:hidden;">Content 1<div>
<div id="content_2" style="display:hidden;">Content 2<div>
<div id="content_3" style="display:hidden;">Content 3<div>

解决方案

here is a jsfiddle with an example of showing/hiding div's via a select.

HTML:

<div id="option1" class="group">asdf</div>
<div id="option2" class="group">kljh</div>
<div id="option3" class="group">zxcv</div>
<div id="option4" class="group">qwerty</div>
<select id="selectMe">
  <option value="option1">option1</option>
  <option value="option2">option2</option>
  <option value="option3">option3</option>
  <option value="option4">option4</option>
</select>

jQuery:

$(document).ready(function () {
  $('.group').hide();
  $('#option1').show();
  $('#selectMe').change(function () {
    $('.group').hide();
    $('#'+$(this).val()).show();
  })
});

这篇关于根据下拉菜单中的选择更改div的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！