根据下拉菜单中选择的选项显示文本 [英] 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>
我打算在选择 Feature 1 时显示 Text 1 ,在选择 Feature 2 时显示 Text 2 等等.
I intend to show Text 1 when Feature 1 is selected, Text 2 when Feature 2 is selected and so on.
关于如何使用JS(或jQuery)执行此操作的任何想法?
Any ideas on how can I do this with JS (or jQuery)?
P.S.现有的大多数解决方案都需要输入字段而不是选项字段,或者我太菜鸟了. xD
P.S. Most existing solutions require input field rather than options field or maybe I am too noob. xD
推荐答案
给出p
将id
标记为options
的value
,并在选定选项具有以下值时显示p标记:等于p
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>
这篇关于根据下拉菜单中选择的选项显示文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文