Develop Reference

JavaScript class did not function in asp.net

I have created a javascript function in my aspx page..
below are the sample code,
<script type="text/javascript">
$(document).ready(function () {
console.log("ready!");
var output = [];
var yr = 1950;
for (var i = 0; i <= 70; i++) {
if (i == 0) {
output[i] = '<option value="0" selected="selected"> Choose Year</option>';
}
else {
output[i] = '<option value="' + (parseInt(1950) + parseInt(i - 1)) + '">' + (parseInt(1950) + parseInt(i - 1)) + '</option>';
}
}
$('#yearid').get(0).innerHTML = output.join('');
});
$("#yearid").change(function () {
var select = $("#yearid option:selected").val();
$("#yearval").val(select);
});
</script>
I would like this function execute in the property such as
<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>
As the code running, the javascript function above should be executed and display the " Choose Year" propery inside as shown above.
I try to run this code but nothing happens to the property. Any help would be appreciated. Thank u.

Your code seems to be working as below. However you may be missing the jQuery script so you can check if that exists.
$(document).ready(function () {
console.log("ready!");
var output = [];
var yr = 1950;
for (var i = 0; i <= 70; i++) {
if (i == 0) {
output[i] = '<option value="0" selected="selected"> Choose Year</option>';
}
else {
output[i] = '<option value="' + (parseInt(1950) + parseInt(i - 1)) + '">' + (parseInt(1950) + parseInt(i - 1)) + '</option>';
}
}
$('#yearid').get(0).innerHTML = output.join('');
});
$("#yearid").change(function () {
var select = $("#yearid option:selected").val();
$("#yearval").val(select);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

Cascading Dropdown is not working using jquery

by the way i just got the js code from one of the questions here but i don't why it will not work on mine. please help me.
.js file
jQuery(function ($) {
var College = {
'College of Engineering': ['Civil Engineering', 'Computer Engineering', 'Electronics and Communication Engineering', 'Electrical Engineering', 'Industrial Engineering'],
}
var $College = $('#college');
$('#department').change(function () {
var department = $(this).val(), clg = College[department] || [];
var html = $.map(clg, function (cl) {
return '<option value="' + cl + '">' + cl + '</option>'
}).join('');
$College.html(html)
});
});
is my code wrong? i dont know why it will not work.
the html code for this is
<select class="form-control" name="college" id="college" runat="server">
<option value="College">Select College</option>
<option value="College of Engineering">College of Engineering</option>
<option value="CAS">College of Arts and Science</option>
<option value="Commerce">College of Commerce</option>
</select>
<select id="department" class="form-control" runat="server" placeholder="Department" >
<option value="Department">Select Department</option>
</select>

You could do something like this: https://jsfiddle.net/rockmandew/12ej2rt3/
Set your HTML Markup like so: (*this example contains a three step dropdown selection)
<select id="main_list">
<option value="default" selected>Select Your List</option>
<option value="mobile">mobile list</option>
<option value="laptop">laptop list</option>
</select>
<select id="brand" class="secondary"></select>
<select id="version" class="secondary"></select>
Then the JS as follows:
$(function() {
var sel, i,
list = ['mobile', 'laptop'],
phone = ['Samsung', 'Nokia'],
laptop = ['HP', 'Dell'],
android = ['4.1', '4.2'],
windows = ['8', '8.1'],
dev_default = '<option value="default" selected>Select your Device brand</option>',
os_default = '<option value="default" selected>Select your OS version</option>';
sel_brand = $('#brand');
sel_version = $('#version');
$('select').change(function() {
switch (this.id) {
case 'main_list':
$('.secondary').hide();
sel_brand.find('option').remove();
sel_brand.append(dev_default);
sel_brand.show();
if (this.value == 'mobile') {
for (i = 0; i < phone.length; i++) {
$("#brand").append(
'<option value="' + phone[i] + '">' + phone[i] + '</option>'
);
}
}else if (this.value == 'laptop') {
for (i = 0; i < phone.length; i++) {
$("#brand").append(
'<option value="' + laptop[i] + '">' + laptop[i] + '</option>'
);
}
}
break;
case 'brand':
sel_version.find('option').remove();
sel_version.append(os_default);
sel_version.show();
if (this.value == 'Samsung') {
for (i = 0; i < android.length; i++) {
$("#version").append(
'<option value="' + android[i] + '">' + android[i] + '</option>'
);
}
}else if (this.value == 'Nokia' || this.value == 'HP' || this.value == 'Dell') {
for (i = 0; i < windows.length; i++) {
$("#version").append(
'<option value="' + windows[i] + '">' + windows[i] + '</option>'
);
}
}
break;
}
});
}); //END document.ready()
Also, if you need/want more information on how to populate these dropdowns dynamically from either a text file, JSON, or a database - check out this article: https://css-tricks.com/dynamic-dropdowns/

Populating values in dropdowns

I need to create dropdowns using javascript/jquery
Values in the first dropdown should be as follows:
<option value="0">Select</option>
<option value="1">Occ1</option>
<option value="2">Occ2</option>
Second dropdown should be shown only if the value selected from the first dropdown is other Select
<option value="0">Select</option>
<option value="11">subOcc1</option>
<option value="12">subOcc2</option>
Third dropdown should be shown only if the value selected from the second dropdown is other than Select
<option value="0">Select</option>
<option value="111">superSubOcc1</option>
<option value="112">superSubOcc2</option>
<option value="113">superSubOcc3</option>
<option value="114">superSubOcc4</option>
Can someone please help me with this?

Hope this works for you.
HTML
<select id="select1">
<option value="0">select</option>
</select>
<br/>
<select id="select2">
<option value="0">select</option>
</select>
<br/>
<select id="select3">
<option value="0">select</option>
</select>
JS
for (var key in data) {
$("#select1").append('<option value="' + key + '">' + data[key].name + '</option>');
}
$("#select1").change(function () {
$('#select2').find('option').filter(function () {
return $(this).val() != '0';
}).remove();
$('#select3').find('option').filter(function () {
return $(this).val() != '0';
}).remove();
var currentSelect = $(this).val();
var currentOccupation = data[currentSelect].occupation;
for (var key in currentOccupation) {
$("#select2").append('<option value="' + key + '">' + currentOccupation[key].name + '</option>');
}
});
$("#select2").change(function () {
$('#select3').find('option').filter(function () {
return $(this).val() != '0';
}).remove();
var currentSelect1 = $("#select1").val();
var currentSelect2 = $(this).val();
var currentOccupation = data[currentSelect1].occupation[currentSelect2].occupation;
for (var key in currentOccupation) {
$("#select3").append('<option value="' + currentOccupation[key].occCode + '">' + currentOccupation[key].name + '</option>');
}
});

jquery .grep is not removing array element

$(document).ready(function () {
var numbers = ['sachin', 'raaj', 'rahul', 'mahesh', 'sandip'];
$('#btn').click(function ()
{
var c = $("#ad_list option:selected").text();
numbers = jQuery.grep(numbers, function (value) {
return value != c;
}); >
});
var option = '';
for (i = 0; i < numbers.length; i++) {
option += '<option value="' + i + '">' + numbers[i] + '</option>'; >
}
$('#ad_list').append(option);
});
below is html code dropdownlist showing element in array
<label>ADD:</label>
<select name="ADD_list" id="ad_list"></select>
<input type="submit" id="btn" />

You need to update your option after removing the selected element:
function updateOption(numbers) {
$("#ad_list").empty();
var option = '';
for (i = 0; i < numbers.length; i++) {
option += '<option value="' + i + '">' + numbers[i] + '</option>';
}
$('#ad_list').append(option);
}
$(document).ready(function () {
var numbers = ['sachin', 'raaj', 'rahul', 'mahesh', 'sandip'];
$('#btn').click(function () {
var c = $("#ad_list option:selected").text();
numbers = jQuery.grep(numbers, function (value) {
return value != c;
});
updateOption(numbers);
});
updateOption(numbers);
});
Fiddle Demo

jQuery for removing rows of a table

I have some javascript for checking if the table has the same number of rows as that in the select option, if not then delete those rows, so I wrote the following:
$(document).ready(function() {
$("#noOfSegments").change(function() {
var counter = $("#noOfSegments").val();
for (i = 0; i < counter; i++) {
var row = $("<tr><td>" + i + "</td><td>" + i + "</td><td>" + i + "</td><td>" + i + "</td><td>" + i + "</td></tr>");
$("#segmentTable").append(row);
}
if (segmentTable.rows.length > counter) {
var rowLen = segmentTable.rows.length;
var delIndex = 1;
for (i = 0; i <= rowLen; i++) {
if (i > counter) {
segmentTable.deleteRow(i - delIndex);
delIndex++;
}
}
}
});
});
<select id="noOfSegments">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
and #segmentTable is my table id
but I want some jQuery code for doing same, can you help me write it?
Thanks in advance.

-Update-
Demo: http://jsfiddle.net/C7Ygh/
js:
$("#noOfSegments").change(function(){
var count = $("#noOfSegments").val();
var rowcount = $("#segmentTable tr").length;
while (rowcount > count) {
$("#segmentTable tr:last-child").remove();
rowcount = $("#segmentTable tr").length;
}
});

I do not understand where is the chance for extra rows as you are appending rows in for loop based on select value.
But based on the counter if you want to remove extra elements, check how many are added extra and remove them.
var counter = $('#noOfSegments').val(),
Rows = $("#segmentTable > tr");
if(Rows.length > counter){
Rows.slice(counter - Rows.length).each(function(){
$(this).remove();
});
}