BASIC DEPENDENT DROP DOWN LIST
1) Create HTML file
<html>
<head>
<title>Dependent Drop-down List Using Jquery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="demo.js">
</script>
</head>
<body>
<form>
<select id="fst">
<option>1</option>
<option>2</option>
</select>
<select id="snd">
</select>
</form>
</body>
</html>
-----------------------------------------------------------------------------
2) jQuery
$(document).ready(function(){
$("#fst").change(function(){
var fst = $("#fst").val();
$("#fst").change(function(){
var fst = $("#fst").val();
if(fst=="1"){
$('#snd').html("<option>3</option><option>4</option>");
}
if(fst=="2"){
$('#snd').html("<option>5</option><option>6</option>");
}
});
});
});
# make new file demo.js
Explanation
To use jQuery have to add jQuery library
To add jQuery library
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script> between head tags.
add our jquery as external file and add it.
first select box is fst is trigger which trigger jquery and fetch second select box data.
for more details see below video :
No comments:
Post a Comment