如何根据下拉框选择 show/hide div
How to show/hide divs based on a dropdown box selection
我知道我不是唯一遇到此问题的人,但我还找不到 javascript 解决方案。
这是我的下拉选择。现在我想为每个选项显示一条特定消息。
<select name="lehrberuf" id="lehrberuf" class="browser-default" required>
<option value="" disabled selected class="grey-text">Lehrberuf</option>
<option value="Anlagenfuehrer/-in EFZ">Anlagenführer/-in EFZ</option>
<option value="Anlagen- und Apparatebauer/-in EFZ">Anlagen- und Apparatebauer/-in EFZ</option>
<option value="Automatiker/-in EFZ">Automatiker/-in EFZ</option>
<option value="Elektroinstallateur/-in EFZ">Elektroinstallateur/-in EFZ</option>
<option value="Elektroplaner/-in EFZ">Elektroplaner/-in EFZ</option>
<option value="Fachmann/-frau Betriebsunterhalt EFZ">Fachmann/-frau Betriebsunterhalt EFZ</option>
<option value="Informatiker/-in EFZ">Informatiker/-in EFZ</option>
<option value="Kauffrau / Kaufmann EFZ">Kauffrau / Kaufmann EFZ</option>
<option value="Konstrukteur/-in EFZ">Konstrukteur/-in EFZ</option>
<option value="Kunststofftechnologe/-technologin EFZ">Kunststofftechnologe/-technologin EFZ</option>
<option value="Laborant/-in EFZ Fachrichtung Chemie">Laborant/-in EFZ Fachrichtung Chemie</option>
<option value="Logistiker/-in EFZ Fachrichtung Lager">Logistiker/-in EFZ Fachrichtung Lager</option>
<option value="Mediamatiker/-in EFZ">Mediamatiker/-in EFZ</option>
<option value="Polymechaniker/-in EFZ">Polymechaniker/-in EFZ</option>
</select>
这应该是每个选项的消息。
<div class="row col s12">
<div class="hiddenmessage1">You have to select <strong>any one option</strong> so i am here</div>
<div class="hiddenmessage2">You have selected <strong>red option</strong> so i am here</div>
<div class="hiddenmessage3">You have selected <strong>green option</strong> so i am here</div>
<div class="hiddenmessage4">You have selected <strong>blue option</strong> so i am here</div>
<div class="hiddenmessage5">You have selected <strong>blue option</strong> so i am here</div>
<div class="hiddenmessage6">You have selected <strong>blue option</strong> so i am here</div>
<div class="hiddenmessage7">You have selected <strong>blue option</strong> so i am here</div>
<div class="hiddenmessage8">You have selected <strong>blue option</strong> so i am here</div>
<div class="hiddenmessage9">You have selected <strong>blue option</strong> so i am here</div>
<div class="hiddenmessage10">You have selected <strong>blue option</strong> so i am here</div>
<div class="hiddenmessage11">You have selected <strong>blue option</strong> so i am here</div>
<div class="hiddenmessage12">You have selected <strong>blue option</strong> so i am here</div>
<div class="hiddenmessage13">You have selected <strong>blue option</strong> so i am here</div>
<div class="hiddenmessage14">You have selected <strong>blue option</strong> so i am here</div>
</div>
我需要一些 JS 方面的帮助。
提前致谢。
尝试:
$('#lehrberuf ').on('change',function(){
var index = $('#lehrberuf option').index($(this).find(':selected'));
console.log(index);
$('.hiddenmessage'+(index+1)).toggle();
});
你可以使用
$(document).ready(function(){
$('#lehrberuf').on('change',function(){
var getIndex = $(this).find('>option:selected').index();
$('.row > div').hide(); // you can use slideDown() or fadeOut() instead of .hide()
$('.row > div').eq(getIndex).show(); // you can use slideUp() or fadeIn() instead of .hide()
});
});
如果可以避免的话,拥有这么多 div 是一种糟糕的编码习惯。假设您需要更改布局或其他更改,您必须执行 10 次以上或更改 10 次以上 class 定义。
您的下拉菜单只有一个选择,为什么不只选择一个 div 并替换内容?
您有 html 例如:
<select onchange="showText(this)">
<option value="my text">text</option>
<select>
<div id="dvContent">select an option!</div>
然后 javascript :
<script>
function showText(dd) {
var sel = dd.options[dd.selectedIndex].value,
dv = document.getElementById("dvContent");
dv.innerHTML = sel.value;
}
</script>
下次一定要试一试,别人给你打码是学不会的。学习的唯一方法就是犯错。
这个不用jQuery,个人觉得最好学好再用jQuery 为了方便。但是,如果您愿意,可以使用 jQuery 将其最小化。
试试这个:
$('#lehrberuf').change(function() {
var selected_index = $('#lehrberuf option:selected').index();
var text_in_div = $('#messages > div:eq('+selected_index+')').text();
alert(text_in_div);
});
我知道我不是唯一遇到此问题的人,但我还找不到 javascript 解决方案。
这是我的下拉选择。现在我想为每个选项显示一条特定消息。
<select name="lehrberuf" id="lehrberuf" class="browser-default" required>
<option value="" disabled selected class="grey-text">Lehrberuf</option>
<option value="Anlagenfuehrer/-in EFZ">Anlagenführer/-in EFZ</option>
<option value="Anlagen- und Apparatebauer/-in EFZ">Anlagen- und Apparatebauer/-in EFZ</option>
<option value="Automatiker/-in EFZ">Automatiker/-in EFZ</option>
<option value="Elektroinstallateur/-in EFZ">Elektroinstallateur/-in EFZ</option>
<option value="Elektroplaner/-in EFZ">Elektroplaner/-in EFZ</option>
<option value="Fachmann/-frau Betriebsunterhalt EFZ">Fachmann/-frau Betriebsunterhalt EFZ</option>
<option value="Informatiker/-in EFZ">Informatiker/-in EFZ</option>
<option value="Kauffrau / Kaufmann EFZ">Kauffrau / Kaufmann EFZ</option>
<option value="Konstrukteur/-in EFZ">Konstrukteur/-in EFZ</option>
<option value="Kunststofftechnologe/-technologin EFZ">Kunststofftechnologe/-technologin EFZ</option>
<option value="Laborant/-in EFZ Fachrichtung Chemie">Laborant/-in EFZ Fachrichtung Chemie</option>
<option value="Logistiker/-in EFZ Fachrichtung Lager">Logistiker/-in EFZ Fachrichtung Lager</option>
<option value="Mediamatiker/-in EFZ">Mediamatiker/-in EFZ</option>
<option value="Polymechaniker/-in EFZ">Polymechaniker/-in EFZ</option>
</select>
这应该是每个选项的消息。
<div class="row col s12">
<div class="hiddenmessage1">You have to select <strong>any one option</strong> so i am here</div>
<div class="hiddenmessage2">You have selected <strong>red option</strong> so i am here</div>
<div class="hiddenmessage3">You have selected <strong>green option</strong> so i am here</div>
<div class="hiddenmessage4">You have selected <strong>blue option</strong> so i am here</div>
<div class="hiddenmessage5">You have selected <strong>blue option</strong> so i am here</div>
<div class="hiddenmessage6">You have selected <strong>blue option</strong> so i am here</div>
<div class="hiddenmessage7">You have selected <strong>blue option</strong> so i am here</div>
<div class="hiddenmessage8">You have selected <strong>blue option</strong> so i am here</div>
<div class="hiddenmessage9">You have selected <strong>blue option</strong> so i am here</div>
<div class="hiddenmessage10">You have selected <strong>blue option</strong> so i am here</div>
<div class="hiddenmessage11">You have selected <strong>blue option</strong> so i am here</div>
<div class="hiddenmessage12">You have selected <strong>blue option</strong> so i am here</div>
<div class="hiddenmessage13">You have selected <strong>blue option</strong> so i am here</div>
<div class="hiddenmessage14">You have selected <strong>blue option</strong> so i am here</div>
</div>
我需要一些 JS 方面的帮助。
提前致谢。
尝试:
$('#lehrberuf ').on('change',function(){
var index = $('#lehrberuf option').index($(this).find(':selected'));
console.log(index);
$('.hiddenmessage'+(index+1)).toggle();
});
你可以使用
$(document).ready(function(){
$('#lehrberuf').on('change',function(){
var getIndex = $(this).find('>option:selected').index();
$('.row > div').hide(); // you can use slideDown() or fadeOut() instead of .hide()
$('.row > div').eq(getIndex).show(); // you can use slideUp() or fadeIn() instead of .hide()
});
});
如果可以避免的话,拥有这么多 div 是一种糟糕的编码习惯。假设您需要更改布局或其他更改,您必须执行 10 次以上或更改 10 次以上 class 定义。
您的下拉菜单只有一个选择,为什么不只选择一个 div 并替换内容?
您有 html 例如:
<select onchange="showText(this)">
<option value="my text">text</option>
<select>
<div id="dvContent">select an option!</div>
然后 javascript :
<script>
function showText(dd) {
var sel = dd.options[dd.selectedIndex].value,
dv = document.getElementById("dvContent");
dv.innerHTML = sel.value;
}
</script>
下次一定要试一试,别人给你打码是学不会的。学习的唯一方法就是犯错。
这个不用jQuery,个人觉得最好学好再用jQuery 为了方便。但是,如果您愿意,可以使用 jQuery 将其最小化。
试试这个:
$('#lehrberuf').change(function() {
var selected_index = $('#lehrberuf option:selected').index();
var text_in_div = $('#messages > div:eq('+selected_index+')').text();
alert(text_in_div);
});