Show Text Based On Option Selected In Dropdown

I have a dropdown like below. Title Feature 1

Solution 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();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="form_name">Title</label>
<select class="bootstrap-select">
  <option value="1" selected="selected">Feature 1</option>
  <option value="2">Feature 2</option>
  <option value="3">Feature 3</option>
  <option value="4">Feature 4</option>
</select>
<div>
  <p id="1">Text1</p>
</div>
<div>
  <p id="2">Text2</p>
</div>
<div>
  <p id="3">Text3</p>
</div>
<div>
  <p id="4">Text4</p>
</div>

Solution 2:

function display(){
    var e = document.getElementById("dropDownId");
    var index = e.selectedIndex;
    if(index==0){
        document.getElementById("first").style.display = 'block'
        document.getElementById("second").style.display = 'none'
    }
    else if(index==1){
        document.getElementById("first").style.display = 'none'
        document.getElementById("second").style.display = 'block'
    }
}

<label for="form_name">Title</label>
<select class="bootstrap-select" id="dropDownId" onchange="display()">
  <option value="1" selected="selected">Feature 1</option>
  <option value="2">Feature 2</option>
</select>
<div id="first"><p>Text1</p></div>
<div id="second" style="display: none;"><p>Text2</p></div>

Please run this snippet..and check out your solution..

Solution 3:

With pure javascript

let select = document.querySelector("select");
let divs = document.querySelectorAll("div");
let result = document.querySelector("#result");

function func1(par){
  result.innerText = divs[par - 1].innerText;
}

div:not(#result) {
  display:none;
}

<label for="form_name">Title</label>
<select class="bootstrap-select" onchange="func1(this.value)">
  <option value="1" selected="selected">Feature 1</option>
  <option value="2">Feature 2</option>
  <option value="3">Feature 3</option>
  <option value="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>
<div id="result"></div>

Solution 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();
})

function updateDisplay(){
  var idToShow = $("#select-panel").find(":selected").val() || "div1";
   $(".subcontent").each(function(){
      $(this).css("display",$(this).is("#"+idToShow) ? 'block' : 'none');
   })
}

updateDisplay();

.subcontent{
display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select-panel">
  <option value="div1">1</option>
  <option value="div2">2</option>
</select>
<div id="div1" class="subcontent">Text 1</div>
<div id="div2" class="subcontent">Text 2</div>

Share

Top Question

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 …

Flex-box Only Display As Many Items That Fit In A Container

I want to only use CSS to make it so I have a container whi…

How To Add Vertical Sub-menu To Horizontal Menu Using Css And Html?

I want to add a vertical sub-menu to my horizontal menu. I …

JavaScript Simple Redirect After Password Is Entered

I just want to click a button, then, if you get the passwor…

How Exactly Can I Replace An Iframe With A Div And Javascript?

I have a page that loads an external HTML page into an iFra…

Auto Refresh IFrame HTML

How do I auto Refresh a Iframe every 3 Seconds with out it …

Angular 4 Template Binding With Es6 Template String

Something I could do in Vue, but doesn't appear to work…

Listen For Mouse Click And Keypress Events Within Iframe

I would like to add some explanations to each slide of an e…

Flexbox Half Side Layout, Left Side Image Fixed

How I can split screen half and left side is image fixed (l…

Adding A Hyperlink To Wordpress' Simplicity-Lite Featured-box Element

I'm building a site for one of my very first clients us…

• October 2024 (55)
• September 2024 (19)
• August 2024 (375)
• July 2024 (340)
• June 2024 (659)
• May 2024 (1284)
• April 2024 (748)
• March 2024 (1519)
• February 2024 (1714)
• January 2024 (1352)
• December 2023 (601)
• November 2023 (301)
• October 2023 (570)
• September 2023 (290)
• August 2023 (325)
• July 2023 (266)
• June 2023 (349)
• May 2023 (225)
• April 2023 (145)
• March 2023 (136)
• February 2023 (166)
• January 2023 (258)
• December 2022 (129)
• November 2022 (226)
• October 2022 (179)
• September 2022 (156)
• August 2022 (294)
• July 2022 (98)

Menu Halaman Statis

• Beranda

© 2022 - Html5 Lite