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?

You'll need to use the onchange event of the select box itself. — Kevin Boucher
– Kevin Boucher, Commented May 17, 2018 at 16:05

TFrazee · Accepted Answer · 2018-05-17 16:09:00Z

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>

answered May 17, 2018 at 16:09

TFrazee

8078 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

brk · Accepted Answer · 2018-05-17 16:08:50Z

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>

answered May 17, 2018 at 16:08

brk

50.3k10 gold badges59 silver badges85 bronze badges

Comments

Muhammad Usman · Accepted Answer · 2018-05-17 16:10:57Z

0

Add an onchange event on select tag
Check the selected value with event.target.value
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>

answered May 17, 2018 at 16:10

Muhammad Usman

10.1k26 silver badges41 bronze badges

Comments

Kevin Boucher · Accepted Answer · 2018-05-17 16:12:32Z

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>

Sandeep Ingale · Accepted Answer · 2018-05-17 16:18:48Z

0

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>

answered May 17, 2018 at 16:18

Sandeep Ingale

4384 silver badges8 bronze badges

Comments

Josh · Accepted Answer · 2018-05-17 16:32:42Z

0

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.

edited May 17, 2018 at 16:32

answered May 17, 2018 at 16:20

Josh

3717 silver badges28 bronze badges

1 Comment

Josh Over a year ago

Make sure you choose the best answer and finish your post if you were able to solve your problem.

Collectives™ on Stack Overflow

Calling a function from a dropdown selection in html and javascript

6 Answers 6

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related