Show text based on option selected in dropdown

问题:

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

回答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>

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

回答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>

回答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>