Get value from dropdown and pass it to another function (JS)

Question

can you tell me what's wrong with my code?

I've got this dropdown list:

<select name="mySelect" id="mySelect" onchange="getSelectedValue();">  
<option value="1">Text 1</option>  
<option value="2">Text 2</option>

And the following script:

function getSelectedValue() {  
var index = document.getElementById('mySelect').selectedIndex;  
var index = document.getElementById('mySelect').value;  
return index;    
}  
function passValue(x){
var a = x;
alert(a);
}    
passValue(getSelectedValue());

The getSelectedValue function works fine, but when I try to pass the value it returns to the passValue function nothing happens. What am I doing wrong here?

I copied your code into a fiddle, jsfiddle.net/wqq4pmte and it alerts the value of the selected item in your select element. What were you expecting to happen? — marty
– marty, Commented Oct 2, 2014 at 11:43
This is really strange, I tried it in JS Bin and nothing would happen. The only difference was that I did not split it between the HTML and JS windows but embeded the JS code in the HTML. I'll check it out in Webstorm when I get home, thanks! — user4096694
– user4096694, Commented Oct 2, 2014 at 11:49
I have to double-post for visibility: In your JS fiddle the code only alerts the first selected item, why's that? — user4096694
– user4096694, Commented Oct 2, 2014 at 11:54
It's showing the first value because both functions are being called when the page is loaded, and therefore the first value is alerted. I'm guessing you want to alert the value when the select element is changed? — marty
– marty, Commented Oct 2, 2014 at 12:15

T J · Accepted Answer · 2023-09-25 00:05:34Z

2

You can add a change event listener and call passValue function as follows:

var select = document.getElementById('mySelect');

select.addEventListener("change",function() {
  passValue(this.value);
});

function passValue(x) {
  var a = x;
  console.log(a);
}

<select name="mySelect" id="mySelect" >
  <option value="1">Text 1</option>
  <option value="2">Text 2</option>
</select>

edited Sep 25, 2023 at 0:05

answered Oct 2, 2014 at 13:04

T J

43.2k13 gold badges87 silver badges142 bronze badges

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

Comments

Harutyun Abgaryan · Accepted Answer · 2014-10-02 12:57:59Z

0

Try this

function getSelectedValue() {  
var index = document.getElementById('mySelect').selectedIndex;  
var index = document.getElementById('mySelect').value;  
return index;    
}  
function passValue(x){
var a = x();
alert(a);
}

jQuery('#mySelect').change(function(){
    passValue(getSelectedValue)
})

answered Oct 2, 2014 at 12:57

Harutyun Abgaryan

2,0231 gold badge14 silver badges15 bronze badges

1 Comment

user4096694 Over a year ago

Thank you, I'm not acquainted with jquery yet, but I'll have a look at it.

Collectives™ on Stack Overflow

Get value from dropdown and pass it to another function (JS)

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related