Calling a function from a dropdown selection in html and javascript

Question

Okay,so I was coding a simple HTML program and I ran into some problems.

I wanted to make a function that is called when certain options in a dropdown list is selected. My setup looks a bit like this.

<input type="number" id="int_c" value="" style="display:none">

<select id="mode">
        <option id="prtr" selected="myFunction()"> Selection 1 </option>
</select>

<script>
    function myFunction(){
document.getElementById("int_c").style.display = "block";
}
</script>

That doesn't work,it doesn't even reach the function (I tested it with alert() ). So I also tried putting an onchange that calls the function in select .It also didn't work. Any ideas?

Answer 1

Try to add the function to the onchange event handler of the select. Also for this you need at least two select options

 function myFunction(elem) { console.log(elem.value) document.getElementById("int_c").style.display = "block"; } 

 <input type="number" id="int_c" value="" style="display:none"> <select id="mode" onchange="myFunction(this)"> <option> select </option> <option id="prtr" value="test"> Selection 1 </option> </select> 

Answer 2

The event needs to be called on <select> , not on the <option> .

<input type="number" id="int_c" value="" style="display:none">

<select id="mode" onchange="myFunction(this)">
        <option id="prtr"> Selection 1 </option>
</select>

<script>
    function myFunction(elem){
        var selectedValue = elem.value;
        document.getElementById("int_c").style.display = "block";
}
</script>

Answer 3

1. Add an onchange event on select tag
2. Check the selected value with event.target.value
3. Call your function

 document.getElementById("mode").addEventListener("change",function(event){ if(event.target.value ==="3"){ document.getElementById("int_c").style.display = "block"; } }) 

 <input type="number" id="int_c" value="" style="display:none"> <select id="mode"> <option value="1"> Selection 1 </option> <option value="2"> Selection 2 </option> <option value="3"> Selection 3 </option> </select> 

Answer 4

There is no selected event on options. You will need to use the change event of the select box itself:

 var selectBox = document.getElementById('mode'); var numberInput = document.getElementById('int_c'); function handleModeChanged(e) { var value = e.target.value; console.log('Mode has changed.'); if (value === 'selection1') { console.log('Show input.'); numberInput.style.display = 'inline-block'; } else { console.log('Hide input.'); numberInput.style.display = 'none'; } } selectBox.addEventListener('change', handleModeChanged); 

 <input type="number" id="int_c" value="" style="display:none"> <select id="mode"> <option>Select</option> <option value="selection1">Selection 1</option> <option value="selection2">Selection 2</option> </select> 

Answer 5

You need to attach a change in event to a select box and once any option is selected then you will call that function depend on that call.

 var selectBox = document.getElementById("mode"); selectBox.addEventListener("change", function(){ myFunction(); }); function myFunction(){ document.getElementById("int_c").style.display = "block"; } 

 <input type="number" id="int_c" value="" style="display:none"> <select id="mode"> <option id="none"> none </option> <option id="prtr"> Selection 1 </option> </select> 

Answer 6

Try something like this. You'll need to include jQuery in the head of your page.

<input type="number" id="int_c" value="" style="display:none">

<select id="mode">
        <option>Select a value.</option>
        <option id="prtr">Selection 1</option>
</select>

<script>
     $("#mode").on("change",
         function(){
              var option = $(this).find("option:selected").html();
              if(option == "Selection 1"){
                  document.getElementById("int_c").style.display = "block";
              }
     });
</script>

Once again, be sure to include jQuery in your head. This grabs the ID of the dropdown list, and when the list changes, it pulls the html value, in your case "Selection 1". I've removed any spacing you had in the option

Then there is a conditional if statement that checks if the html value is equal to "Selection 1". I'll try this in a fiddle and see what happens

edit: I've also added a default value for your selector, so it isn't initially set to Selection 1.

edit2: link to js fiddle: https://jsfiddle.net/nj3fsdnv/

It's working for me.