[英]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.我打算选择功能1时,显示文本1,文本2时特征2被选择等。
Any ideas on how can I do this with JS (or jQuery)?关于如何使用 JS(或 jQuery)执行此操作的任何想法?
PS Most existing solutions require input field rather than options field or maybe I am too noob. PS 大多数现有的解决方案需要输入字段而不是选项字段,或者我可能太菜鸟。 xD
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
标签指定id
作为options
的value
,并在所选选项的值等于p
的id
时显示 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使用纯 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您可以在要显示的
div
上使用ids
,并使用您select
的 id 更改select
的value
$("#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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.