根据选择值显示div
问题描述:
我试图在用户做出选择后进行更改。 如果用户选择“选项A”,然后用类“option1”显示div的内容。根据选择值显示div
我已经用非常简单的jquery完成了这个操作(见下面的代码或jsfiddle)。 我无法弄清楚的是如何让它变成动态的。
这里是我会怎么做它在我的脑海:
- 从“#选择”获取所有选项值并投入阵列。
- 用新阵列替换“hideAll”函数的内容。
- 使某种“为每个功能”运行,虽然阵列和 使如果stament。
小记:选项值始终与div类相同。
var hideAll = function() {
$('.option1, .option2, .option3').hide();
}
$('#select').on('change', function() {
hideAll();
var category = $(this).val();
console.log(category);
if (category === 'option1') {
$('.option1').show();
}
if (category === 'option2') {
$('.option2').show();
}
if (category === 'option3') {
$('.option3').show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="post">
<label for="option">Options</label>
<select name="select" id="select">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<div class="option1" style="display:block;">
<label for="countries">Countries</label>
<select name="countries">
<option value="denmark">Denmark</option>
<option value="norway">Norway</option>
<option value="uk">UK</option>
</select>
</div>
<div class="option2" style="display:none;">
<label for="letters">Letters</label>
<select name="letters">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
</div>
<div class="option3" style="display:none;">
<label for="numbers">Numbers</label>
<select name="numbers">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</form>
答
没有必要为一个循环的一切,你可以搜索任何格,其班级开始option
:
var hideAll = function() {
$('div[class^=option]').hide();
}
$('#select').on('change', function() {
hideAll();
var category = $(this).val();
$('.' + category).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="post">
<label for="option">Options</label>
<select name="select" id="select">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<div class="option1" style="display:block;">
<label for="countries">Countries</label>
<select name="countries">
<option value="denmark">Denmark</option>
<option value="norway">Norway</option>
<option value="uk">UK</option>
</select>
</div>
<div class="option2" style="display:none;">
<label for="letters">Letters</label>
<select name="letters">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
</div>
<div class="option3" style="display:none;">
<label for="numbers">Numbers</label>
<select name="numbers">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
答
给你选择的div另一个类
<form method="post">
<label for="option">Options</label>
<select name="select" id="select">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<div class="option1 optiondiv" style="display:block;">
<label for="countries">Countries</label>
<select name="countries">
<option value="denmark">Denmark</option>
<option value="norway">Norway</option>
<option value="uk">UK</option>
</select>
</div>
<div class="option2 optiondiv" style="display:none;">
<label for="letters">Letters</label>
<select name="letters">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
</div>
<div class="option3 optiondiv" style="display:none;">
<label for="numbers">Numbers</label>
<select name="numbers">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
使用新的类hideall
var hideAll = function() {
$('.optiondiv').hide();
}
使用选择值显示块
$('#select').on('change', function() {
hideAll();
var category = $(this).val();
$('.' + category).show();
});
答
我觉得有一个更简单的方法来解决这个问题。首先,为HTML使用ID和类的组合,然后使用JQuery为您处理动态内容。
的HTML
请注意,我已经加入class="option-grouping" id="option1"
等您的每一个的div。这是更好的语义结构,使JQuery更容易。
<form method="post">
<label for="option">Options</label>
<select name="select" id="select">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<div class="option-grouping" id="option1" style="display:block;">
<label for="countries">Countries</label>
<select name="countries">
<option value="denmark">Denmark</option>
<option value="norway">Norway</option>
<option value="uk">UK</option>
</select>
</div>
<div class="option-grouping" id="option2" style="display:none;">
<label for="letters">Letters</label>
<select name="letters">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
</div>
<div class="option-grouping" id="option3" style="display:none;">
<label for="numbers">Numbers</label>
<select name="numbers">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
jQuery的
这是凉爽的一部分。完成这一切,试试这个作为你的jQuery:
$('#select').on('change', function() {
var category = $(this).val();
/* Hide all the divs */
$('.option-grouping').hide();
/* Now unhide the selected options */
$('#' + category).show();
});
工程一个款待!
+1
我应该澄清,最好使用id =“option1”而不是class =“option1”的原因是因为ID是针对页面上唯一的元素,而类是针对您期望在页面上看到重复的元素。 –
这绝对是一个更好的方法,如果你能够调整HTML。始终保持清洁,以便在单一课堂上行动。 *如果*您需要按原样使用现有的HTML,请参阅我的答案 - 但如果可能,请采取这种方式。 –