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

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 Limit The Html Table Records In Each Page

I am populating a table in my jsp which has more than 20 re…

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 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='…