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
}

Answer 1

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");
  }
}

Answer 2

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/

Answer 3

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> 

Answer 4

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> 

Answer 5

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.