Show Text Based On Option Selected In Dropdown

I have a dropdown like below. TitleFeature 1Solution 1: Give the p tags the id as the value of the options, and show the p tag when selected option has the value which is equal to the id of p$('p').hide(); $('#1').show(); $('select').change(function() { $('p').hide(); var a = $(this).val(); $("#" + a).show(); })Copy<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><labelfor="form_name">Title</label><selectclass="bootstrap-select"><optionvalue="1"selected="selected">Feature 1</option><optionvalue="2">Feature 2</option><optionvalue="3">Feature 3</option><optionvalue="4">Feature 4</option></select><div><pid="1">Text1</p></div><div><pid="2">Text2</p></div><div><pid="3">Text3</p></div><div><pid="4">Text4</p></div>CopySolution 2: functiondisplay(){ var e = document.getElementById("dropDownId"); var index = e.selectedIndex; if(index==0){ document.getElementById("first").style.display = 'block'document.getElementById("second").style.display = 'none' } elseif(index==1){ document.getElementById("first").style.display = 'none'document.getElementById("second").style.display = 'block' } }Copy<labelfor="form_name">Title</label><selectclass="bootstrap-select"id="dropDownId"onchange="display()"><optionvalue="1"selected="selected">Feature 1</option><optionvalue="2">Feature 2</option></select><divid="first"><p>Text1</p></div><divid="second"style="display: none;"><p>Text2</p></div>CopyPlease run this snippet..and check out your solution.. Solution 3: With pure javascriptlet select = document.querySelector("select"); let divs = document.querySelectorAll("div"); let result = document.querySelector("#result"); functionfunc1(par){ result.innerText = divs[par - 1].innerText; }Copydiv:not(#result) { display:none; }Copy<labelfor="form_name">Title</label><selectclass="bootstrap-select"onchange="func1(this.value)"><optionvalue="1"selected="selected">Feature 1</option><optionvalue="2">Feature 2</option><optionvalue="3">Feature 3</option><optionvalue="4">Feature 4</option></select><div><p>Text1</p></div><div><p>Text2</p></div><div><p>Text3</p></div><div><p>Text4</p></div><divid="result"></div>CopySolution 4: You can use ids on your div that you want to show and change the value of your select with the ids you choosed$("#select-panel").change(function(){ updateDisplay(); }) functionupdateDisplay(){ var idToShow = $("#select-panel").find(":selected").val() || "div1"; $(".subcontent").each(function(){ $(this).css("display",$(this).is("#"+idToShow) ? 'block' : 'none'); }) } updateDisplay();Copy.subcontent{ display:none; }Copy<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><selectid="select-panel"><optionvalue="div1">1</option><optionvalue="div2">2</option></select><divid="div1"class="subcontent">Text 1</div><divid="div2"class="subcontent">Text 2</div>Copy Share Post a Comment for "Show Text Based On Option Selected In Dropdown" Top Question Disable Text Entry In

I am making a simple web app. At one part of it, I have inc…