Get value selected in dropdown list using Javascript (displays null)

Question

I need to access the value selected from a drop down list using Javascript. But every time I get 'null' as the answer though a list item is selected.

My HTML page:

<select class="mySelect">
    <option value="st1" selected="selected">Create new Stream</option>
    <option value="st1">Stream 1</option>
    <option value="st2">Stream 2</option>
    <option value="st3">Stream 3</option>
    <option value="st4">Stream 4</option>
</select>

<input type="button" value="show attributes" class="panel-button-attr" onclick="choice()">

When the above button is clicked, the selected value should be alerted to the user. So in my Javascript function:

function choice() {

    var choice=document.getElementById("mySelect");
    alert(choice);
    var strUser = choice.options[choice.selectedIndex].text;
    alert(strUser.toString());

}

Here, I've tried to use the first alert to check if any selected list item is identified correctly. But, at this point, it displays null and the strUsr line doesn't run at all.

I know this is actually a trivial task but am finding it hard to figure this inconsistency.

If *getElementById* returns null it means it didn't find the element. — RobG, Jun 14 '16 at 06:26
you are trying to access the element with id "mySelect", but you have given "mySelect" as a class and not as an ID in your HTML. — Guillaume, Jun 14 '16 at 06:26
Also, favor the use of console.log over alert to enjoy a better developer experience. — Delapouite, Jun 14 '16 at 06:28
Thanks for all the speedy replies guys. My bad, been working with this project for hours and even the simple things seem to be hidden. Changed it to ID and it works. — Nayantara Jeyaraj, Jun 14 '16 at 06:34
I would just like to know, is there a way to display which element was selected without using a button. i.e Call the function choice() with every change in option — Nayantara Jeyaraj, Jun 14 '16 at 06:35

score 3 · Answer 1 · answered Jun 14 '16 at 06:27

3

Please change your HTML element attribute.

You've mentioned 'mySelect' as class and in JS, you are calling it with ID reference.

answered Jun 14 '16 at 06:27

Charan Kumar

553
2
13

score 1 · Accepted Answer · answered Jun 14 '16 at 06:26

1

You have to specify id of select element

<select class="mySelect" id="mySelect">

answered Jun 14 '16 at 06:26

Manish Parakhiya

3,732
3
22
25

score 0 · Answer 3 · answered Jun 14 '16 at 06:28

follow the code:

you need to give id to dropdown because you try to get data by id so...

<select id="mySelect" class="mySelect">
   <option value="st1" selected="selected">Create new Stream</option>
   <option value="st1">Stream 1</option>
   <option value="st2">Stream 2</option>
   <option value="st3">Stream 3</option>
   <option value="st4">Stream 4</option>
</select>

I hope this will solve your issue....

Thanks...

score 0 · Answer 4 · answered Jun 14 '16 at 06:28

0

var str = "";
$( "select option:selected" ).each(function() {
  str += $( this ).text() + " ";
});

answered Jun 14 '16 at 06:28

Phong Nguyen

173
3
15

Could you please elaborate more your answer adding a little more description about the solution you provide? – abarisone Jun 14 '16 at 06:52

score 0 · Answer 5 · answered Jun 14 '16 at 06:31

plunker: https://plnkr.co/edit/Q7yyVvUTaLYvPaDW5j7G?p=preview

    <select id="mySelect" class="mySelect" >
      <option value="st1" selected="selected">Create new Stream</option>
      <option value="st1">Stream 1</option>
      <option value="st2">Stream 2</option>
      <option value="st3">Stream 3</option>
      <option value="st4">Stream 4</option>
    </select>


function choice() {

    var choice=document.getElementById("mySelect");
    alert(choice.value);  // get value
    var strUser = choice.options[choice.selectedIndex].text;
    alert(strUser.toString());
}

score 0 · Answer 6 · answered Jun 14 '16 at 06:38

0

You didn't have id in your html ,so I try by class name..

function choice() {
    var choice=document.getElementsByClassName("mySelect");
    var strUser = choice[0].options[choice[0].selectedIndex].text;
    alert(strUser.toString());            
}

answered Jun 14 '16 at 06:38

Jack jdeoel

4,554
5
26
52

Get value selected in dropdown list using Javascript (displays null)

6 Answers6