How to make an if statement to disable select option? - javascript

I have three select menus where the user selects a subject, year and season. However, I want it so that if the user selects the year '2019', the 'Fall' option will get disabled.
<select name="Subject">
<option value="Math">Math</option>
<option value="Physics">Physics</option>
<option value="Chemistry">Chemistry</option>
<option value="Biology">Biology</option>
</select>
<select name="Year">
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
</select>
<select name="Season">
<option value="Spring">Spring</option>
<option value="Fall">Fall</option>
</select>


Create and event handler for the Year's change event and disable the season based on what Year's new value is.
https://jsfiddle.net/075fnm4a/
HTML
<select name="Subject">
<option value="Math">Math</option>
<option value="Physics">Physics</option>
<option value="Chemistry">Chemistry</option>
<option value="Biology">Biology</option>
</select>
<select name="Year">
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
</select>
<select name="Season">
<option value="Spring">Spring</option>
<option value="Fall">Fall</option>
</select>
Jquery
$(document).ready(function(){
$('select[name="Year"]').on('change',function(){
var $this = $(this);
$('select[name="Season"]').find('option[value="Fall"]').prop('disabled', ($this.val() == '2019') ); // disabled or enabled
});
$('select[name="Year"]').trigger('change');
});


Like this.
document.querySelector('#year').onchange = ev => {
const value = ev.target.value;
if (value === '2019') {
document.querySelector('#fall').disabled = true;
} else {
document.querySelector('#fall').disabled = false;
}
}
<select name="Subject">
<option value="Math">Math</option>
<option value="Physics">Physics</option>
<option value="Chemistry">Chemistry</option>
<option value="Biology">Biology</option>
</select>
<select name="Year" id="year">
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
</select>
<select name="Season">
<option value="Spring">Spring</option>
<option value="Fall" id="fall" disabled>Fall</option>
</select>


<select name="Subject">
<option value="Math">Math</option>
<option value="Physics">Physics</option>
<option value="Chemistry">Chemistry</option>
<option value="Biology">Biology</option>
</select>
<select name="Year" id="years">
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
</select>
<select name="Season" id="seasons">
<option value="Spring">Spring</option>
<option value="Fall">Fall</option>
</select>
$('#years').on('change', function(){
if($(this).val()==='2019'){
$("#seasons option").each(function()
{
if($(this).val() === 'Fall'){
$(this).attr('disabled', 'disabled');
}
});
}
});


You can onchange event and bind callback to it that get season select element and enable and disable Fall season according to selection value
<select name="Subject">
<option value="Math">Math</option>
<option value="Physics">Physics</option>
<option value="Chemistry">Chemistry</option>
<option value="Biology">Biology</option>
</select>
<select name="Year" onchange="changeYear(this.value)">
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
</select>
<select name="Season">
<option value="Spring" >Spring</option>
<option value="Fall" disabled>Fall</option>
</select>
<script>
function changeYear(value)
{
var seasons = document.getElementsByName("Season")[0].options;
var fallSeason = Array.apply(null, seasons).find(season => season.value === 'Fall');
fallSeason.disabled = (value==='2019')
}
</script>

Related

Javascript global variable vs. HTML data attribute

When we use $(this).data('options',$('#send1 option').clone());, it works, but when I use a global variable to store list data, it does not work. What is the difference between these two methods?
First method (works): This code clones data to the data attribute and then filters and copies to both send1 and send2.
$("#receiver").change(function() {
if ($(this).data('options') == undefined) {
/* Takes an array of all options-2 and kind of embeds it in select1 */
$(this).data('options',$('#send1 option').clone());
}
if ($(this).data('options-2') == undefined) {
$(this).data('options-2',$('#send2 option').clone());
}
var id1 = $(this).val();
console.log(id1);
var options1 = $(this).data('options').filter('[value=' + id1 + ']');
var options2 = $(this).data('options-2').filter('[value=' + id1 + ']');
$('.send1 ').html(options1);
$('.send2 ').html(options2);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<h5>Hello ListBox</h5>
<div>
<select name="Receiver" id="receiver">
<option value="1">Fruit</option>
<option value="2">Animal</option>
<option value="3">Bird</option>
<option value="4">Car</option>
</select>
<select class="send1" name="ShipFrom1" id="send1">
<option value="1">Banana</option>
<option value="1">Apple</option>
<option value="1">Orange</option>
<option value="2">Wolf</option>
<option value="2">Fox</option>
<option value="2">Bear</option>
<option value="3">Eagle</option>
<option value="3">Hawk</option>
<option value="4">BWM<option>
</select>
<select class="send2" name="ShipFrom2" id="send2">
<option value="1">Banana</option>
<option value="1">Apple</option>
<option value="1">Orange</option>
<option value="2">Wolf</option>
<option value="2">Fox</option>
<option value="2">Bear</option>
<option value="3">Eagle</option>
<option value="3">Hawk</option>
<option value="4">BWM<option>
</select>
</div>
Second method (doesn't work): This code uses a Javascript global variable. I am trying to clone the send1 options to a and then filter the global variable according to the value of receiver. Then, I copy the a result to both send1 and send2.
var a = $('#send1 option').clone();
$("#receiver").change(function() {
var id1 = $(this).val();
console.log(id1);
var options1 = a.filter('[value=' + id1 + ']');
$('.send1 ').html(options1);
$('.send2 ').html(options1);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div>
<select name="Receiver" id="receiver">
<option value="1">Fruit</option>
<option value="2">Animal</option>
<option value="3">Bird</option>
<option value="4">Car</option>
</select>
<select class="send1" name="ShipFrom1" id="send1">
<option value="1">Banana</option>
<option value="1">Apple</option>
<option value="1">Orange</option>
<option value="2">Wolf</option>
<option value="2">Fox</option>
<option value="2">Bear</option>
<option value="3">Eagle</option>
<option value="3">Hawk</option>
<option value="4">BWM<option>
</select>
<select class="send2" name="ShipFrom2" id="send2">
<option value="1">Banana</option>
<option value="1">Apple</option>
<option value="1">Orange</option>
<option value="2">Wolf</option>
<option value="2">Fox</option>
<option value="2">Bear</option>
<option value="3">Eagle</option>
<option value="3">Hawk</option>
<option value="4">BWM<option>
</select>
</div>

I don't think you are using the best method for this ...
I suggest:
function setOption() {
var receiverVal = $('#receiver').val()
$('#send1 option:not(.'+receiverVal+')').hide();
$('#send2 option:not(.'+receiverVal+')').hide();
$('#send1 option.'+receiverVal).show();
$('#send2 option.'+receiverVal).show();
$('#send1 option:visible').first().attr('selected', 'selected');
$('#send2 option:visible').first().attr('selected', 'selected');
}
setOption();
$("#receiver").change(setOption)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<select name="Receiver" id="receiver">
<option value="fruit" >Fruit</option>
<option value="animal">Animal</option>
<option value="bird" >Bird</option>
<option value="car" >Car</option>
</select>
<select class="send1" name="ShipFrom1" id="send1">
<option value="10" class="fruit" >Banana </option>
<option value="11" class="fruit" >Apple </option>
<option value="12" class="fruit" >Orange </option>
<option value="21" class="animal" >Wolf </option>
<option value="22" class="animal" >Fox </option>
<option value="23" class="animal" >Bear </option>
<option value="31" class="bird" >Eagle </option>
<option value="32" class="bird" >Hawk </option>
<option value="41" class="car" >BWM <option>
</select>
<select class="send2" name="ShipFrom2" id="send2" class="bird">
<option value="10" class="fruit" >Banana </option>
<option value="11" class="fruit" >Apple </option>
<option value="12" class="fruit" >Orange </option>
<option value="21" class="animal" >Wolf </option>
<option value="22" class="animal" >Fox </option>
<option value="23" class="animal" >Bear </option>
<option value="31" class="bird" >Eagle </option>
<option value="32" class="bird" >Hawk </option>
<option value="41" class="car" >BWM <option>
</select>

Disable the second selection options that are smaller than the first selection option

If I select for example: "5" from first selector, i want to disable first five options from second selector. Select days from 5 to minim 6.
<select class="form-control" name="days[]">
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
<option value=4>4</option>
<option value=5>5</option>
<option value=6>6</option>
<option value=7>7</option>
<option value=8>8</option>
<option value=9>9</option>
<option value=1>10</option>
<option value=1>11</option>
<option value=1>12</option>
<select>
<select class="form-control" name="days[]">
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
<option value=4>4</option>
<option value=5>5</option>
<option value=6>6</option>
<option value=7>7</option>
<option value=8>8</option>
<option value=9>9</option>
<option value=1>10</option>
<option value=1>11</option>
<option value=1>12</option>
<select>

You can do it using prevAll() and addBack() methods with a change event handler.
// get dropdowns
const $drop = $('[name="days[]"]');
// attach change event handler
$drop.eq(0).change(function() {
// enable all the options
$drop.eq(1).find('option').prop('disabled', false);
// get the corresponding option and all its previous options and then disable them
$drop.eq(1).find(`option[value="${this.value}"]`).prevAll().addBack().prop('disabled', true);
}).change()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" name="days[]">
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
<option value=4>4</option>
<option value=5>5</option>
<option value=6>6</option>
<option value=7>7</option>
<option value=8>8</option>
<option value=9>9</option>
<option value=1>10</option>
<option value=1>11</option>
<option value=1>12</option>
</select>
<select class="form-control" name="days[]">
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
<option value=4>4</option>
<option value=5>5</option>
<option value=6>6</option>
<option value=7>7</option>
<option value=8>8</option>
<option value=9>9</option>
<option value=1>10</option>
<option value=1>11</option>
<option value=1>12</option>
</select>

How do you add/remove people dynamically from a list in html?

This question has been asked on this forum multiple times. Yet every time I've applied the code and edited the fields to accommodate my code it doesn't seem to work. Essentially I'm trying to develop a list from a form, so once the fields are filled out and you click the add button. The info provided would populate in an ordered list below the form. Here is the following html and javascript code I've got so far. When I click the add button the information that was typed gets showed in the url bar after the original domain name, but it never makes a list.
var list = document.getElementById('list');
function add(){
var name = document.getElementById('name').value;
var people = document.getElementById('people').value;
var phone = document.getElementById('phone').value;
var entry = document.createElement('li');
entry.appendChild(document.createTextNode(name + people + phone));
list.appendChild(entry);
return false;
}
<html>
<head>
<meta charset="UTF-8">
<title>Whiskey on Water</title>
<h1>Whiskey on Water: Waiting List</h1>
</head>
<body>
<form id="lineInfo" onsubmit="return add()">
<fieldset>
<legend>Customer Information</legend>
<label for="name">Name*</label>
<input name="name" id="name" type="text" />
<label for="people">How many people?</label>
<input name="people" id="people" type="number" list="people1" />
<datalist id="people1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
<option value="60">60</option>
<option value="61">61</option>
<option value="62">62</option>
<option value="63">63</option>
<option value="64">64</option>
<option value="65">65</option>
<option value="66">66</option>
<option value="67">67</option>
<option value="68">68</option>
<option value="69">69</option>
<option value="70">70</option>
<option value="71">71</option>
<option value="72">72</option>
<option value="73">73</option>
<option value="74">74</option>
<option value="75">75</option>
<option value="76">76</option>
<option value="77">77</option>
<option value="78">78</option>
<option value="79">79</option>
<option value="80">80</option>
<option value="81">81</option>
<option value="82">82</option>
<option value="83">83</option>
<option value="84">84</option>
<option value="85">85</option>
<option value="86">86</option>
<option value="87">87</option>
<option value="88">88</option>
<option value="89">89</option>
<option value="90">90</option>
<option value="91">91</option>
<option value="92">92</option>
<option value="93">93</option>
<option value="94">94</option>
<option value="95">95</option>
<option value="96">96</option>
<option value="97">97</option>
<option value="98">98</option>
<option value="99">99</option>
<option value="100">100</option>
</datalist>
<label for="phone">Phone Number*</label>
<input name="phone" id="phone" type="tel"/>
<script src="wow.js"></script>
<button onclick='add ()' type="submit"> Add to List </button>
</fieldset>
</form>
<ol id="list"></ol>
</body>
</html>

Well, your code works when run as a SO Snippet (see below), so we will need more info about the problem you're having before we can answer your question.
That said, I did notice that your new list item was adding twice, and this is because you are running the add() function twice: Once for the onclick handler on the button press, and once as the action of the form upon submit. So, we need to remove one of those... I bet that you'll end up wanting to keep the form, but my working code below removes the form (keeping the onclick on the button) because I bet that your problem is that, although your code works, you are refreshing your page with the form, clearing out the options that have been added to your list. If this sounds right to you then look into passing/fetching the new list items via GET params.
var list = document.getElementById('list');
function add(){
var name = document.getElementById('name').value;
var people = document.getElementById('people').value;
var phone = document.getElementById('phone').value;
var entry = document.createElement('li');
entry.appendChild(document.createTextNode(name + people + phone));
list.appendChild(entry);
return false;
}
<html>
<head>
<meta charset="UTF-8">
<title>Whiskey on Water</title>
<h1>Whiskey on Water: Waiting List</h1>
</head>
<body>
<fieldset>
<legend>Customer Information</legend>
<label for="name">Name*</label>
<input name="name" id="name" type="text" />
<label for="people">How many people?</label>
<input name="people" id="people" type="number" list="people1" />
<datalist id="people1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
<option value="60">60</option>
<option value="61">61</option>
<option value="62">62</option>
<option value="63">63</option>
<option value="64">64</option>
<option value="65">65</option>
<option value="66">66</option>
<option value="67">67</option>
<option value="68">68</option>
<option value="69">69</option>
<option value="70">70</option>
<option value="71">71</option>
<option value="72">72</option>
<option value="73">73</option>
<option value="74">74</option>
<option value="75">75</option>
<option value="76">76</option>
<option value="77">77</option>
<option value="78">78</option>
<option value="79">79</option>
<option value="80">80</option>
<option value="81">81</option>
<option value="82">82</option>
<option value="83">83</option>
<option value="84">84</option>
<option value="85">85</option>
<option value="86">86</option>
<option value="87">87</option>
<option value="88">88</option>
<option value="89">89</option>
<option value="90">90</option>
<option value="91">91</option>
<option value="92">92</option>
<option value="93">93</option>
<option value="94">94</option>
<option value="95">95</option>
<option value="96">96</option>
<option value="97">97</option>
<option value="98">98</option>
<option value="99">99</option>
<option value="100">100</option>
</datalist>
<label for="phone">Phone Number*</label>
<input name="phone" id="phone" type="tel"/>
<script src="wow.js"></script>
<button onclick='add ()' type="submit"> Add to List </button>
</fieldset>
<ol id="list"></ol>
</body>
</html>

This may help assuming each field has an id:
document.querySelector('#yourButton').addEventListener('click', function(e){
/* Stop the form from submiting if useful */
e.preventDefault();
/* get the values of fields one at a time */
var field1 = document.querySelector('#input1').value;
var field2 = document.querySelector('#input2').value;
...
/** prepare new node and insert */
var newNode = '<ul>'+'<li>'+field1+'</li>'+'<li>'+field2+'</li>'+'</ul>';
document.querySelector('body').appendChild(newNode);
});

set dropdown option value based another dropdown onchange function

i want to make multiple dropdown option value to be the same as dropdown value with id=monday on change function.
monday
<select id="monday">
<option value=""></option>
<option value="00:00">00:00</option>
<option value="00:15">00:15</option>
<option value="00:30">00:30</option>
<option value="00:45">00:45</option>
<option value="01:00">01:00</option>
</select>
tuesday
<select id="tuesday">
<option value=""></option>
<option value="00:00">00:00</option>
<option value="00:15">00:15</option>
<option value="00:30">00:30</option>
<option value="00:45">00:45</option>
<option value="01:00">01:00</option>
</select>
wednesday
<select id="wednesday">
<option value=""></option>
<option value="00:00">00:00</option>
<option value="00:15">00:15</option>
<option value="00:30">00:30</option>
<option value="00:45">00:45</option>
<option value="01:00">01:00</option>
</select>
JS
$("#monday").change(function() {
$("#tuesday").value = $("#monday").value;
$("#wednesday").value = $("#monday").value;
});
i saw the example with assign dropdown name with array like name="dropdown[]", but i want to keep the id like i wrote. Thanks in advance

Here is how to sync any other to monday
$(function() {
$("#monday").on("change", function() { // or .sel for all
$(".sel").not(this).val(this.value);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
monday
<select class="sel" id="monday">
<option value=""></option>
<option value="00:00">00:00</option>
<option value="00:15">00:15</option>
<option value="00:30">00:30</option>
<option value="00:45">00:45</option>
<option value="01:00">01:00</option>
</select>
<br>
<br>tuesday
<select class="sel" id="tuesday">
<option value=""></option>
<option value="00:00">00:00</option>
<option value="00:15">00:15</option>
<option value="00:30">00:30</option>
<option value="00:45">00:45</option>
<option value="01:00">01:00</option>
</select>
<br>
<br>wednesday
<select class="sel" id="wednesday">
<option value=""></option>
<option value="00:00">00:00</option>
<option value="00:15">00:15</option>
<option value="00:30">00:30</option>
<option value="00:45">00:45</option>
<option value="01:00">01:00</option>
</select>

Nothing would happen when you have updated value property, which only works with DOM element. So use val() method for jQuery object, although you can combine selectors into one by separating them using a comma.
$("#monday").change(function() {
$("#tuesday,#wednesday").val(this.value);
});
$("#monday").change(function() {
$("#tuesday,#wednesday").val(this.value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
monday
<select id="monday">
<option value=""></option>
<option value="00:00">00:00</option>
<option value="00:15">00:15</option>
<option value="00:30">00:30</option>
<option value="00:45">00:45</option>
<option value="01:00">01:00</option>
</select>
tuesday
<select id="tuesday">
<option value=""></option>
<option value="00:00">00:00</option>
<option value="00:15">00:15</option>
<option value="00:30">00:30</option>
<option value="00:45">00:45</option>
<option value="01:00">01:00</option>
</select>
wednesday
<select id="wednesday">
<option value=""></option>
<option value="00:00">00:00</option>
<option value="00:15">00:15</option>
<option value="00:30">00:30</option>
<option value="00:45">00:45</option>
<option value="01:00">01:00</option>
</select>

Select dropdown in Java script without using selectedindex

I am trying to use below javascript to select the month value.I need to get the dropdown selection without using index.As the month values are taken from other file.Please help me.
HTML:
<select name="param[start_month]">
<option label="Jan" value="1">Jan</option>
<option label="Feb" value="2">Feb</option>
<option label="Mar" value="3">Mar</option>
<option label="Apr" value="4">Apr</option>
<option label="May" value="5">May</option>
<option label="Jun" value="6">Jun</option>
<option label="Jul" value="7">Jul</option>
<option label="Aug" value="8">Aug</option>
<option label="Sep" value="9">Sep</option>
<option label="Oct" value="10">Oct</option>
<option label="Nov" value="11">Nov</option>
<option label="Dec" value="12" selected="selected">Dec</option>
</select>
Javascript:
document.getElementsByName("param[start_month]").value="Jan"
also i tried this too
document.getElementsByName("param[start_month]").label="Jan"

Get the option bu using attribute equals selector and set selected property.
document.querySelector("[name='param[start_month]'] option[label='Jan']").selected = true;
<select name="param[start_month]">
<option label="Jan" value="1">Jan</option>
<option label="Feb" value="2">Feb</option>
<option label="Mar" value="3">Mar</option>
<option label="Apr" value="4">Apr</option>
<option label="May" value="5">May</option>
<option label="Jun" value="6">Jun</option>
<option label="Jul" value="7">Jul</option>
<option label="Aug" value="8">Aug</option>
<option label="Sep" value="9">Sep</option>
<option label="Oct" value="10">Oct</option>
<option label="Nov" value="11">Nov</option>
<option label="Dec" value="12" selected="selected">Dec</option>
</select>
Or set the value as the value of the attribute specified. Although getElementsByName returns collection of elements you need to get element by index.
document.getElementsByName("param[start_month]")[0].value = "1"
<select name="param[start_month]">
<option label="Jan" value="1">Jan</option>
<option label="Feb" value="2">Feb</option>
<option label="Mar" value="3">Mar</option>
<option label="Apr" value="4">Apr</option>
<option label="May" value="5">May</option>
<option label="Jun" value="6">Jun</option>
<option label="Jul" value="7">Jul</option>
<option label="Aug" value="8">Aug</option>
<option label="Sep" value="9">Sep</option>
<option label="Oct" value="10">Oct</option>
<option label="Nov" value="11">Nov</option>
<option label="Dec" value="12" selected="selected">Dec</option>
</select>

Categories

Resources