Javascript 更改选择值时，显示某些div内容

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

英语
法语
德文
函数句柄\语言（什么）{
document.getElementById（'related_en_content'）.style.visibility='hidden'；
document.getElementById（'related_fr_content'）.style.visibility='hidden'；
document.getElementById（'related_gr_content'）.style.visibility='hidden'；
如果（what.value==“en”）{
document.getElementById（'related_en_content'）.style.visibility='visible'；
}
如果（what.value==“fr”）{
document.getElementById（'related_fr_content'）.style.visibility='visible'；
}
如果（what.value==“gr”）{
document.getElementById（'related_gr_content'）.style.visibility='visible'；
}
}
英文文本
法文文本
德语文本

英语
法语
德文
函数句柄\语言（什么）{
document.getElementById（'related_en_content'）.style.visibility='hidden'；
document.getElementById（'related_fr_content'）.style.visibility='hidden'；
document.getElementById（'related_gr_content'）.style.visibility='hidden'；
如果（what.value==“en”）{
document.getElementById（'related_en_content'）.style.visibility='visible'；
}
如果（what.value==“fr”）{
document.getElementById（'related_fr_content'）.style.visibility='visible'；
}
如果（what.value==“gr”）{
document.getElementById（'related_gr_content'）.style.visibility='visible'；
}
}
英文文本
法文文本
德语文本

英语
法语
德文
英文文本
法文文本
德语文本
$（“#语言”）。关于（“更改”，函数（）{
id=“related\”+$（this）.val（）+“\u content”；
$（“#”+id.show（）.sides（）.hide（））
})

英语
法语
德文
英文文本
法文文本
德语文本
$（“#语言”）。关于（“更改”，函数（）{
id=“related\”+$（this）.val（）+“\u content”；
$（“#”+id.show（）.sides（）.hide（））
})

---

+1-如果要正确使用“on”，则页面加载时应为

var id=

@Jonny，如何隐藏所有内容并仅显示所选内容例如，隐藏法语div:

+1-如果要正确使用“on”，则页面加载时应为

var id=

@Jonny，如何隐藏所有内容并仅显示所选内容例如，隐藏法语div:

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

$('[id^="related"]').not(':first').hide();

$("#language").on('change', function() {
    $("#related_"+this.value+"_content").show().siblings('[id^="related"]').hide();
});

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

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

$(document).ready(function(){  
    $("#language").change(function(e){ 
        $('[id^="related"]')
        .not($('#related_'+$(this).val()+'_content'))
        .hide();
        $('#related_'+$(this).val()+'_content').show()
    }); 
});​