根据下拉菜单中选择的选项显示文本 [英] Show text based on option selected in dropdown

查看:139
本文介绍了根据下拉菜单中选择的选项显示文本的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个如下所示的下拉列表.

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

推荐答案

给出pid标记为optionsvalue,并在选定选项具有以下值时显示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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆