Show text based on option selected in dropdown

Question

I have a dropdown like below.

<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>Text1</p></div>
<div><p>Text2</p></div>
<div><p>Text3</p></div>
<div><p>Text4</p></div>

I intend to show Text 1 when Feature 1 is selected, Text 2 when Feature 2 is selected and so on.

Any ideas on how can I do this with JS (or jQuery)?

P.S. Most existing solutions require input field rather than options field or maybe I am too noob. xD

ellipsis · Accepted Answer · 2019-02-11T13:12:03.173

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>

edited Feb 11 '19 at 13:12

answered Feb 11 '19 at 13:02

ellipsis

12,049
2
17
33

Hi again. Unfortunately this doesn't seem to work elsewhere. The snippet works here fine but doesn't in an html file. Any idea why? For e.g: https://codepen.io/anon/pen/Vgxogw – Feb 12 '19 at 07:43
1

In the codepen first close the body tag, and just above the closing of the tag paste the script and remove it from the head. It will work – ellipsis Feb 12 '19 at 07:48
@Umer just a little warn with this example, if the select is by default on an other option you have to change the default id shown in your JS too. It's not dynamically based on the selected option. – Alexis Feb 13 '19 at 11:54

doğukan · Answer 2 · 2019-02-11T14:01:55.767

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>

Yeah sorry this doesn't work. The divs just jeep showing after another. — , Feb 11 '19 at 13:09

score 0 · Answer 3 · answered Feb 11 '19 at 13:18

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..

Alexis · Answer 4 · 2019-02-11T13:12:37.557

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>

This works great but can Text 1 show at start since 1 is selected by default? — , Feb 11 '19 at 13:11

Show text based on option selected in dropdown

4 Answers4

Linked