CODEWITHSUNDEEP
javascripthtml
agent25
agent25

Reputation: 47

Calling a function from a dropdown selection in html and javascript

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?

Upvotes: 1

Views: 2900

Answers (6)

Josh
Josh

Reputation: 371

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.

Upvotes: 0

Sandeep Ingale
Sandeep Ingale

Reputation: 438

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>

Upvotes: 0

Kevin Boucher
Kevin Boucher

Reputation: 16685

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>

Upvotes: 0

Muhammad Usman
Muhammad Usman

Reputation: 10148

  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>

Upvotes: 0

TFrazee
TFrazee

Reputation: 807

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>

Upvotes: 2

brk
brk

Reputation: 50346

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>

Upvotes: 1

Related Questions