javascript 在更改选择值时，显示某些 div 内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10132331/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-10-26 08:47:36 来源:igfitidea点击:
on change the select value, display certain div content
提问by ahmedsaber111
Here is the HTML code
这是 HTML 代码
<select id="language">
<option value="en">english</option>
<option value="fr">french</option>
<option value="gr">german</option>
</select>
<div id="related_en_content">
english text
</div>
<div id="related_fr_content">
french text
</div>
<div id="related_gr_content">
german text
</div>
Every div related to one of the options in the select, I want replace divwhen changing the select option.
与选择中的选项之一相关的每个 div，我想div在更改选择选项时替换。
Here's what I've tried:
这是我尝试过的：
$(document).ready(
function() {
$("#language").change(
function() {
$("#" + this.value).show().siblings().hide();
});
$("#language").change();
}
回答by Jonny Burger
<select id="language">
<option value="en">english</option>
<option value="fr">french</option>
<option value="gr">german</option>
</select>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div>
<div id="related_en_content">
english text
</div>
<div id="related_fr_content">
french text
</div>
<div id="related_gr_content">
german text
</div>
</div>
<script>
$("#language").on("change", function() {
id = "related_" + $(this).val() + "_content";
$("#" + id).show().siblings().hide()
})
</script>
回答by The Alpha
回答by adeneo
回答by Grumpy
<select id="language" onchange:"javascript:handle_language(this)">
<option value="en">english</option>
<option value="fr">french</option>
<option value="gr">german</option>
</select>
<script>
function handle_language(what){
document.getElementById('related_en_content').style.visibility='hidden';
document.getElementById('related_fr_content').style.visibility='hidden';
document.getElementById('related_gr_content').style.visibility='hidden';
if(what.value=="en"){
document.getElementById('related_en_content').style.visibility='visible';
}
if(what.value=="fr"){
document.getElementById('related_fr_content').style.visibility='visible';
}
if(what.value=="gr"){
document.getElementById('related_gr_content').style.visibility='visible';
}
}
</script>
<div id="related_en_content">
english text
</div>
<div id="related_fr_content">
french text
</div>
<div id="related_gr_content">
german text
</div>
