You can find here source code for jQuery Practice with Real Task- Part 9.
YouTube link for this task video is given below :
TASK - 9: Fill/Clear Drop Down Options on Button Click
Preview is:
CODE:
<!DOCTYPE html>
<html>
<head>
<title>Task-9: Fill/Clear Drop Down Options on Button Click</title>
<meta charset="utf-8" />
<script src="../Scripts/jquery-3.3.1.js"></script>
</head>
<body>
<div>
<select id="DDLBooks">
<option value="">Select Book</option>
</select>
<input type="button" value="Add Books" id="btnAddBooks" />
<input type="button" value="Clear Books" id="btnClearBooks" />
</div>
<script>
var AllBooks = ["C#", "PHP", "Java", "Python"];// Array
$('#btnAddBooks').click(function () {
var AllBooksLength = AllBooks.length;// total number of books in Array
// loop to add books in DDL
for (var i = 0; i < AllBooksLength; i++) {
$('#DDLBooks').append(new Option(AllBooks[i], AllBooks[i]));
}
});
$('#btnClearBooks').click(function () {
$('#DDLBooks').empty(); // clear the DDL
$('#DDLBooks').append(new Option("Select Book", ""));// to add default option
});
</script>
</body>
</html>
YouTube link for this task video is given below :
TASK - 9: Fill/Clear Drop Down Options on Button Click
Preview is:
<!DOCTYPE html>
<html>
<head>
<title>Task-9: Fill/Clear Drop Down Options on Button Click</title>
<meta charset="utf-8" />
<script src="../Scripts/jquery-3.3.1.js"></script>
</head>
<body>
<div>
<select id="DDLBooks">
<option value="">Select Book</option>
</select>
<input type="button" value="Add Books" id="btnAddBooks" />
<input type="button" value="Clear Books" id="btnClearBooks" />
</div>
<script>
var AllBooks = ["C#", "PHP", "Java", "Python"];// Array
$('#btnAddBooks').click(function () {
var AllBooksLength = AllBooks.length;// total number of books in Array
// loop to add books in DDL
for (var i = 0; i < AllBooksLength; i++) {
$('#DDLBooks').append(new Option(AllBooks[i], AllBooks[i]));
}
});
$('#btnClearBooks').click(function () {
$('#DDLBooks').empty(); // clear the DDL
$('#DDLBooks').append(new Option("Select Book", ""));// to add default option
});
</script>
</body>
</html>
Happy coding.
Rudra Pratap Singh
Software Engineer
Rudra Pratap Singh
Software Engineer
