The below code snippet dipicts how we can populate “End Year” in second dropdownlist all greater than “Start Year” that we selected in the Start Year dropdownlist.
Let us create an html file say selectyear.html
Here we will assign two ids to different select dropdownlist
<html>
<head>
<title>Start And End Year</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<!--start of select dropdownlist with id ="startyear"-->
<select id="startyear">
<option value="0" selected="">Start Year</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
</select>
<!--end of select dropdownlist with id ="startyear"-->
<!--start of select dropdownlist with id ="endyear"-->
<select id="endyear">
<option value="0" selected="">End Year</option>
</select>
<!--end of select dropdownlist with id ="endyear"-->
<script>
var first = $("#startyear");
var total = first.find('option:nth-child(2)').val();
var updateYear = function(e) {
var that = $(this),
current = that.val(),
fill = "<option value = '0'>End Year</option>",
second = $("#endyear"),
yearBox = second.html("");
console.log(current);
if (current != 0) {
for (var cnt = current; cnt <= total; cnt++) {
fill += "<option>" + cnt + "</option>";
}
}
yearBox.append(fill);
}
first.on("change", updateYear);
</script>
</body>
</html>
0 Comment(s)