user6215911 user6215911 - 7 months ago 19
Javascript Question

Show hidden div when choose any option from select list

I have a select list with

id="select"
and a hidden div. When I choose any option from select list, need to show div (
id="choosen"
)

Help me please

<select id="select" name="select" class="selectpicker" data-live-search="true" title="выберите">
<option value="0">0</option>
<option value="1">1</option>
</select>

<!-- show this div -->
<div id="сhoosen" style="display:none"></div>

Answer

I hope this is what you are looking for:

<p>Select</p>

<select id="select" onchange="selFunction()">
  <option value="100">100
  <option value="200">200
  <option value="300">300
  <option value="400">400
</select>


<p id="chosen" style="display:none;"></p>

<style>
  #chosen{   
    background:red;
    color:#fff;
    width:100px;
    height:50px;
  text-align:center;}
  
</style>

<script>
function selFunction() {
    var x = document.getElementById("select").value;
    var result = document.getElementById("chosen");
      result.style.display = "block"; //make #chosen visible
      result.innerHTML = x ; //output selected value
}
</script>