I have successfully implemented a JavaScript function on my aspx page. Here is the code snippet:
<script type="text/javascript">
$(document).ready(function () {
console.log("ready!");
var options = [];
var year = 1950;
for (var i = 0; i <= 70; i++) {
if (i == 0) {
options[i] = '<option value="0" selected="selected"> Choose Year</option>';
}
else {
options[i] = '<option value="' + (parseInt(1950) + parseInt(i - 1)) + '">' + (parseInt(1950) + parseInt(i - 1)) + '</option>';
}
}
$('#yearid').get(0).innerHTML = options.join('');
});
$("#yearid").change(function () {
var selectedValue = $("#yearid option:selected").val();
$("#yearval").val(selectedValue);
});
</script>
I want this function to be executed within the following HTML structure:
<div class="col-md-4 form-group">
<span>Year : </span>
<select id="yearid" class="form-control" runat="server">
</select>
<input id="yearval" type="hidden" runat="server"/>
</div>
Once the code runs, the JavaScript function mentioned above should populate the " Choose Year" value inside the select element as depicted above.
Despite my efforts, the code does not seem to affect the select element. I would appreciate any assistance. Thank you.