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)?
PS Most existing solutions require input field rather than options field or maybe I am too noob. xD
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>
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>
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..
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.