On Change The Select Value, Display Certain Div Content

Here is the HTML code englishfrenchSolution 1: <selectid="language"><optionvalue="en">english</option><optionvalue="fr">french</option><optionvalue="gr">german</option></select><scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><div><divid="related_en_content"> english text </div><divid="related_fr_content"> french text </div><divid="related_gr_content"> german text </div></div><script> $("#language").on("change", function() { id = "related_" + $(this).val() + "_content"; $("#" + id).show().siblings().hide() }) </script>CopySolution 2: $('[id^="related"]').not(':first').hide(); $("#language").on('change', function() { $("#related_"+this.value+"_content").show().siblings('[id^="related"]').hide(); }); CopyFIDDLESolution 3: <selectid="language"onchange:"javascript:handle_language(this)"><optionvalue="en">english</option><optionvalue="fr">french</option><optionvalue="gr">german</option></select><script>functionhandle_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><divid="related_en_content"> english text </div><divid="related_fr_content"> french text </div><divid="related_gr_content"> german text </div>CopySolution 4: $(document).ready(function(){ $("#language").change(function(e){ $('[id^="related"]') .not($('#related_'+$(this).val()+'_content')) .hide(); $('#related_'+$(this).val()+'_content').show() }); });​ CopyExample. Share Post a Comment for "On Change The Select Value, Display Certain Div Content" Top Question Firefox, Chrome, Safari Have Grey Background For Mp4 Html5 Video Any video (that I can make) with a white background becomes… Red Border Still Appears On Inputs After Resetting An HTML 5 Form Firefox I have an HTML 5 form! Great, I'm excited! I decide to … Svg Animation And Firefox I'm struggle with SVG animation drawing, which is work … How To Save Html5 Geolocation Data To Python Django Admin? Is it possible to save the javascript html5 geolocation lat… How To Hide/show Tabs Using Jquery I have four tabs.On loading only the first tab is opened an… Form To Iframe Submission - How Do You Reset The Form After File Upload? I have a form that submits the results to an iframe. The su… How To Limit The Html Table Records In Each Page I am populating a table in my jsp which has more than 20 re… How To Display A Python String As Html In Jupyter Notebook In IPython notebook, I used to be able to display a python … How To Add Placeholder Field?

I've been trying to add placeholder in input type='…