根据下拉菜单中的选择更改 div 的内容 [英] Change the content of a div based on selection from dropdown menu
问题描述
是否有一种简单的方法，使用 JavaScript，根据用户从下拉菜单中的选择，在
option 1 然后我希望显示 1 和所有其他 s被隐藏.示例 HTML 设置
解决方案 这里有一个 jsfiddle通过选择显示/隐藏 div 的示例.
HTML:
asdf<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></选择>
jQuery:
$(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屋！
查看全文
登录 关闭
