Javascript 根据下拉列表中选择的选项显示文本

我有一个下拉列表，如下所示

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

我打算在选择功能1时显示文本1，在选择功能2时显示文本2，依此类推

关于如何使用JS或jQuery实现这一点，有什么想法吗

另外，大多数现有的解决方案需要输入字段而不是选项字段，或者我可能太笨了。xD

为p标签提供id作为选项的值，并在所选选项的值等于p的id时显示p标签

$'p'。隐藏； $1.显示； $'select'.change函数{ $'p'。隐藏； var a=$this.val； $+a.show； } 标题 特征1 专题2 专题3 专题4

Text1

Text2

Text3

Text4

使用纯javascript

让select=document.querySelectorselect； 让divs=document.querySelectorAlldiv； 让结果=document.querySelectorresult； 函数func1par{ result.innerText=divs[par-1].innerText； } div:notresult{ 显示：无； } 标题 特征1 专题2 专题3 专题4 文本1

文本2

文本3

文本4

您可以在要显示的div上使用ID，并使用所选ID更改select的值

$select-panel.changefunction{ 更新显示； } 函数更新显示{ var idToShow=$select panel.find:selected.val | | div1； $.subcent.eachfunction{ $this.cssdisplay，$this.is+idToShow？'block'：'none'； } } 更新显示； .分包{ 显示：无； } 1. 2. 文本1 正文2 功能显示{ var e=document.getElementByIddropDownId； var指数=e.selectedIndex； ifindex==0{ document.getElementByIdfirst.style.display='block' document.getElementByIdsecond.style.display='none' } else ifindex==1{ document.getElementByIdfirst.style.display='none' document.getElementByIdsecond.style.display='block' } } 标题 特征1 专题2 文本1

---

Text2

是的，很抱歉这不起作用。divs只是吉普车一个接一个地显示。这很好，但是文本1可以在开始时显示，因为默认情况下选择了1？再次您好。不幸的是，这在其他地方似乎不起作用。该代码段在这里可以正常工作，但不在html文件中。知道为什么吗？例如：在代码笔中，首先关闭主体标记，然后在标记关闭的正上方粘贴脚本并将其从头部移除。会的work@Umer在这个例子中有一个小小的警告，如果默认情况下选择其他选项，那么您也必须更改JS中显示的默认id。它不是动态地基于所选的选项。