javascript - get selected value from select list

Question

i got a form with a select form elements for month.

<select id="month" name="month">
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
<option>Mar
<option>Apr
<option>May
<option>Jun
<option>Jul
<option>Aug
<option>Sept
<option>Oct
<option>Nov
<option>Dec
</select>

How do i use javascript to get compare the selected value. for example if i select Feb, the javascript will pop up "you selected feb"

var monthSelect = document.getElementById("month")
var opt = monthSelect.options[monthSelect.selectedIndex]
if(opt.text == "Feb")
{
    alert("Feb selected")
    return false
}

You haven't closed most of your options `` And why not just use `document.getElementById("month").value` ...? Also you need to attach an event listener or an attribute event handler — NewToJS, May 18 '16 at 11:46
I agree with the `element.value` suggestion. As simple as `alert(document.getElementById("month").value+ " selected");` — Marcos Pérez Gude, May 18 '16 at 11:49
@BenYep you're also missing a couple of semi colons at the end of your javascript — Rachel Gallen, May 18 '16 at 11:50
@NewToJS hi, i have close all my options and use `document.getElementById("month").value` but its still not working — Ben Yap, May 18 '16 at 11:54

euvl · Accepted Answer · 2016-05-18T12:01:32.203

2

JSFiddle: https://jsfiddle.net/ebrnh047/

Your html:

<select id="month">
  <option value="Jan">Jan</option>
  <option value="Feb">Feb</option>
</select>

Try:

var month = document.getElementById("month");

month.onchange = function() {
  if (month.value == "Feb") {
    alert("Feb selected");
  }
}

edited May 18 '16 at 12:01

answered May 18 '16 at 11:53

euvl

4,716
2
25
30

@BenYap just updated, try it now. You have to but an event handler. – euvl May 18 '16 at 11:58
For this to work you will need to place the script tag after the html element otherwise it will cause an error. – NewToJS May 18 '16 at 12:00
is still not working.. how can i paste my whole code to show – Ben Yap May 18 '16 at 12:01
@BenYap added jsfiddle link, take a look – euvl May 18 '16 at 12:04
@dev-l gotten my jsfiddle? – Ben Yap May 18 '16 at 12:16
@dev-l actually i want to check if month == feb and if day is more then 29. then it prompt and alert. invalid date.. this happen when the submit button is press and it will run the Validate() – Ben Yap May 18 '16 at 12:34
@BenYap https://jsfiddle.net/e0vxmxzt/1/ fixed your issue. When you press send, and if the month Feb, it will alert a message. – euvl May 18 '16 at 12:37
@dev-l btw why if i put the code after my checkemail.. it doesnt work.. however it only works when the code is placed right after "var" – Ben Yap May 18 '16 at 12:46
@BenYap its because you have multiple conditions that `return` from the function. You have to fill everything correctly first, so it passed validation. – euvl May 18 '16 at 13:28

score 0 · Answer 2 · answered May 18 '16 at 12:01

This is a way to do it with JavaScript only:

First, your HTML:

<select id="month" name="month">
  <option value="Jan">Jan</option>
  <option value="Feb">Feb</option>
  <option value="Mar">Mar</option>
  <option value="Apr">Apr</option>
  <option value="May">May</option>
  <option value="Jun">Jun</option>
  <option value="Jul">Jul</option>
  <option value="Aug">Aug</option>
  <option value="Sep">Sep</option>
  <option value="Oct">Oct</option>
  <option value="Nov">Nov</option>
  <option value="Dec">Dec</option>
</select>

Then, your script:

var monthSelect = document.getElementById("month");

monthSelect.onchange = function(){
  var thisValue = this.value;
  alert(thisValue); 
};

This is the fiddle: https://jsfiddle.net/16sn90tp/

score 0 · Answer 3 · answered May 18 '16 at 12:01

Make sure you execute this code on document ready event( window.onload )

  var monthSelect = document.getElementById("month")
  monthSelect.onchange = function() {

    var opt = monthSelect.options[monthSelect.selectedIndex]
    if (opt.text == "Feb") {
      alert("Feb selected")
    }
  }

   <select id="month" name="month">
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
<option>Mar
<option>Apr
<option>May
<option>Jun
<option>Jul
<option>Aug
<option>Sept
<option>Oct
<option>Nov
<option>Dec
</select>

Hasnat · Answer 4 · 2016-05-19T07:44:09.923

0

    Jan Feb

    function myFunction() {
        var monthSelect = document.getElementById("month").value;
        if (monthSelect == "Feb") {
            alert("Feb selected");
            return false;
        }
    }

<select id="month" name="month" onchange="myFunction()">
  <option value="Jan">Jan</option> 
  <option value="Feb">Feb</option>
</select>

edited May 19 '16 at 07:44

answered May 19 '16 at 07:30

Hasnat

11
4

score -1 · Answer 5 · answered May 18 '16 at 11:54

-1

Hi add at first a class called "month" to all of your option tags and one class "monthList" to the select like for example this:

<select class="monthList">
    <option class="month">Jan</option>
    <option class="month">Feb</option>
    <option class="month">Mar</option>
    ...
</select>

After this you need a little bit of JQuery:

$(".monthList .month").click(function(){
    var selectedMonth = $(this).text();
    var showText = "you selected " + selectedMonth;
    alert(showText);
});

Try this, it should work.

answered May 18 '16 at 11:54

webta.st.ic

4,781
6
48
98

1

This is not tagged as [tag:jquery]. So your answer is not correct – Marcos Pérez Gude May 18 '16 at 12:00
I don't downvote, for your information, I only write the comment. – Marcos Pérez Gude May 18 '16 at 12:00
Agreed, jQuery isn't tagged in this question so if you wish to offer a jQuery solution is would be best that you clearly display how to include the jQuery library. – NewToJS May 18 '16 at 12:01
Yes, i forgott to look, my fault :) – webta.st.ic May 18 '16 at 12:22

javascript - get selected value from select list

5 Answers5