在更改选择值时，显示某些div内容 [英] on change the select value, display certain div content

问题描述

以下是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>

每个div与select中的一个选项相关，我想要替换 div 更改选择选项时。

Every div related to one of the options in the select, I want replace div when changing the select option.

以下是我尝试的内容：

$(document).ready(
    function() {
        $("#language").change(
            function() {
                $("#" + this.value).show().siblings().hide();
            });
        $("#language").change();
    }

推荐答案

<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>

这篇关于在更改选择值时，显示某些div内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！