Показать текст на основе опции, выбранной в раскрывающемся списке

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

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

Вы можете использовать ids на вашем div, который хотите показать, и изменить value вашего select с выбранными вами идентификаторами

$("#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>

Answer 4

Дайте тегам p id как value из options, и покажите тег 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>