根據下拉列表中選擇的選項顯示文本

Question

我有一個如下所示的下拉菜單。

<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）執行此操作的任何想法？

PS 大多數現有的解決方案需要輸入字段而不是選項字段，或者我可能太菜鳥。 xD

Answer 1

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

Answer 2

使用純 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>

Answer 3

 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>

請運行此代碼段..並檢查您的解決方案..

Answer 4

您可以在要顯示的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>