发表新帖
发表新帖

on change the select value, display certain div content

前端 未结
关注
4 1006
Happy的楠姐
Happy的楠姐 2021-01-16 15:47

Here is the HTML code
提交评论
  •  加载中...
  • 北海茫月
    2021-01-16 16:38 
    <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>
    0 讨论(0)
  • 余生分开走
    2021-01-16 16:39 
    $(document).ready(function(){  
    $("#language").change(function(e){ 
        $('[id^="related"]')
        .not($('#related_'+$(this).val()+'_content'))
        .hide();
        $('#related_'+$(this).val()+'_content').show()
    }); 
});​

    Example.

    0 讨论(0)
  • 难免孤独
    2021-01-16 16:41 
    $('[id^="related"]').not(':first').hide();

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

    FIDDLE

    0 讨论(0)
    •  看不清?
    提交回复
    热议问题