C:\xampp8\htdocs\lva\index.php
C:\xampp8\htdocs\lva\index.php
C:\xampp8\htdocs\lva\dependableList.js
Last updated
Was this helpful?
Was this helpful?
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8' />
<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
//create arrays to store option and values
var continents = [{
display: "Asia",
value: "asia"
},
{
display: "Africa",
value: "africa"
},
{
display: "Antarctica",
value: "antarctica"
},
{
display: "Australia",
value: "australia"
},
{
display: "Europe",
value: "europe"
},
{
display: "North America",
value: "north-america"
},
{
display: "South America",
value: "south-america"
}
];
var oceans = [{
display: "Pacific",
value: "pacific"
},
{
display: "Atlantic",
value: "atlantic"
},
{
display: "Indian",
value: "indian"
},
{
display: "Southern",
value: "southern"
},
{
display: "Arctic",
value: "arctic"
}
];
//If parent option is changed
$("#parent_selection").change(function() {
var parent = $(this).val(); //get option value from parent
switch (parent) { //using switch compare selected option and populate child
case 'continents':
$('#child_selection').attr('disabled', false);
list(continents);
break;
case 'oceans':
$('#child_selection').attr('disabled', false);
list(oceans);
break;
default: //default child option is blank
$("#child_selection").html('');
$('#child_selection').attr("disabled", true);
break;
}
});
//function to populate child select box
function list(array_list) {
$("#child_selection").html(""); //reset child options
$(array_list).each(function(i) { //populate child options
$("#child_selection").append("<option value='" + array_list[i].value + "'>" + array_list[i].display + "</option>");
});
}
});
</script>
</head>
<body>
<div class="wrapper">
Select :
<select name="parent_selection" id="parent_selection">
<option value="">-- Please Select --</option>
<option value="continents">Continents</option>
<option value="oceans">Oceans</option>
</select>
<select name="child_selection" id="child_selection" disabled="disabled" />
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dependable list with jQuery</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
</head>
<body>
<div class="container mt-5">
<form>
<!-- Super Parent -->
<div class="form-group">
<label for="first_list"> User select </label>
<select class="form-control" id="first_list">
<option value="0"> Select User list </option>
<option value="1"> User A </option>
<option value="2"> User B </option>
<option selected value="3"> User C </option>
<option value="4"> User D </option>
<option value="5"> User E </option>
</select>
</div>
<!-- Parent: User list and Child: Subject list -->
<div class="form-group">
<label for="second_list"> Subject select </label>
<select class="form-control" id="second_list">
<option data-list-id="0" value="0"> Select subject list </option>
<option data-list-id="1" value="1"> Subject A.1 </option>
<option data-list-id="1" value="2"> Subject A.2 </option>
<option data-list-id="1" value="3"> Subject A.3 </option>
<option data-list-id="2" value="4"> Subject B </option>
<option data-list-id="3" selected value="5"> Subject C </option>
<option data-list-id="4" value="6"> Subject D </option>
<option data-list-id="5" value="7"> Subject E </option>
</select>
</div>
<!-- Parent: Subject list and Child: Topic list -->
<div class="form-group">
<label for="third_list">Topic select</label>
<select class="form-control" id="third_list">
<option data-list-id="0" value="0"> Select Topic list </option>
<option data-list-id="1" value="1"> Topic A.1.1 </option>
<option data-list-id="1" value="2"> Topic A.1.2 </option>
<option data-list-id="1" value="3"> Topic A.1.3 </option>
<option data-list-id="2" value="4"> Topic A.2.1 </option>
<option data-list-id="3" selected value="5"> Topic A.3.1 </option>
<option data-list-id="4" value="6"> Topic B </option>
<option data-list-id="5" value="7"> Topic C </option>
<option data-list-id="6" value="8"> Topic D </option>
<option data-list-id="7" value="9"> Topic E </option>
</select>
</div>
<!-- Parent: Subject list and Child: Question list -->
<div class="form-group">
<label for="fourth_list">Question select</label>
<select class="form-control" id="fourth_list">
<option data-list-id="0" value="0"> Select Question list </option>
<option data-list-id="1" value="1"> Question A.1.1 </option>
<option data-list-id="1" value="2"> Question A.1.2 </option>
<option data-list-id="1" value="3"> Question A.1.3 </option>
<option data-list-id="2" value="4"> Question A.2.1 </option>
<option data-list-id="3" selected value="5"> Question A.3.1 </option>
<option data-list-id="4" value="6"> Question B </option>
<option data-list-id="5" value="7"> Question C </option>
<option data-list-id="6" value="8"> Question D </option>
<option data-list-id="7" value="9"> Question E </option>
</select>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<script src="dependableList.js"></script>
<script type="text/javascript">
createDependableList('#first_list', '#second_list');
createDependableList('#second_list', '#third_list');
createDependableList('#second_list', '#fourth_list');
</script>
</body>
</html>
/**
* Create dependable list with this function
* @param {*} parentList-id
* @param {*} childList-id
*/
function createDependableList(parentList, childList) {
var options = $(childList + ' option');
$(parentList).change(function () {
$(childList).empty();
options.each((index, option) => {
if ($(option).data('list-id') == this.value /* || $(option).data('list-id') == 0 */) {
option.selected = option.selected ? true : false;
$(childList).append(option);
}
$(childList).trigger('change');
})
if ($(childList + ' option').length === 0) {
$(childList).append('<option value="">No option available..</option>');
}
})
}