Get dependent countries from same dropdown - html

Question

If we have one dropdown and when we select any item, we need to fetch records having the dependid attribute till dependid is not equal to 0. Below is the code snippet.
<select class="form-control dropdownlist" id="Location">
<option value="67" dependid="17">Amsterdam</option>
<option value="1" dependid="0">APAC</option>
<option value="20" dependid="3">Argentina</option>
<option value="23" dependid="4">Arizona</option>
<option value="40" dependid="26">Atlanta</option>
<option value="47" dependid="31">Austin</option>
<option value="5" dependid="1">Australia</option>
<option value="12" dependid="2">Austria</option>
<option value="54" dependid="8">Bangalore</option>
<option value="61" dependid="74">Bangkok</option>
<option value="69" dependid="19">Brighton</option>
<option value="71" dependid="20">Buenos Aires</option>
<option value="24" dependid="4">California</option>
<option value="21" dependid="3">Canada</option>
<option value="25" dependid="4">Canada - Cloud5</option>
<option value="41" dependid="27">Chicago</option>
<option value="6" dependid="1">China</option>
<option value="48" dependid="31">Dallas</option>
<option value="2" dependid="0">EMEA</option>
<option value="75" dependid="4">Florida</option>
<option value="15" dependid="2">France</option>
<option value="63" dependid="13">Frankfurt</option>
<option value="26" dependid="4">Georgia</option>
<option value="13" dependid="2">Germany</option>
<option value="55" dependid="8">Gurgaon</option>
<option value="7" dependid="1">Hong Kong</option>
<option value="27" dependid="4">Illinois</option>
<option value="8" dependid="1">India</option>
<option value="16" dependid="2">Italy</option>
<option value="37" dependid="75">Jacksonville</option>
<option value="9" dependid="1">Japan</option>
<option value="3" dependid="0">LACC</option>
<option value="42" dependid="76">Las Vegas</option>
<option value="70" dependid="19">London</option>
<option value="35" dependid="24">Los Angeles</option>
<option value="64" dependid="14">Madrid</option>
<option value="22" dependid="3">Mexico</option>
<option value="73" dependid="22">Mexico City</option>
<option value="56" dependid="8">Mumbai</option>
<option value="46" dependid="30">Nashville</option>
<option value="17" dependid="2">Netherlands</option>
<option value="76" dependid="4">Nevada</option>
<option value="28" dependid="4">New York</option>
<option value="43" dependid="28">New York</option>
<option value="38" dependid="75">Orlando</option>
<option value="57" dependid="9">Osaka</option>
<option value="29" dependid="4">Pennsylvania</option>
<option value="44" dependid="29">Philadelphia</option>
<option value="34" dependid="23">Phoenix</option>
<option value="66" dependid="16">Rome</option>
<option value="65" dependid="15">Rueil Malmaison</option>
<option value="36" dependid="25">Saint John</option>
<option value="49" dependid="32">Salt Lake City</option>
<option value="50" dependid="33">Seattle</option>
<option value="52" dependid="6">Shanghai</option>
<option value="10" dependid="1">Singapore</option>
<option value="59" dependid="10">Singapore</option>
<option value="14" dependid="2">Spain </option>
<option value="68" dependid="18">Stockholm</option>
<option value="39" dependid="75">Sunrise</option>
<option value="18" dependid="2">Sweden/Finland</option>
<option value="51" dependid="5">Sydney</option>
<option value="53" dependid="7">Taikoo Shing</option>
<option value="60" dependid="11">Taipei</option>
<option value="11" dependid="1">Taiwan</option>
<option value="30" dependid="4">Tennessee</option>
<option value="31" dependid="4">Texas</option>
<option value="74" dependid="1">Thailand</option>
<option value="58" dependid="9">Tokyo</option>
<option value="72" dependid="21">Toronto</option>
<option value="19" dependid="2">United Kingdom</option>
<option value="4" dependid="0">US</option>
<option value="32" dependid="4">Utah</option>
<option value="62" dependid="12">Vienna</option>
<option value="33" dependid="4">Washington</option>
<option value="45" dependid="29">Wilkes-Barre</option>
</select>
jsfiddle Example
For example if I select item having value 1 (Item : APAC) associated countries will be
Australia, China, Hong Kong,India, Japan, Singapore, Taiwan, Thailand
Australia >> value 5 >> check associated items further >>
same for china, Hong Kong,India, Japan, Singapore, Taiwan, Thailand
Please help

Answer 1

You could use the attribute selector for this element[attribute="value"] and the value of the select element after it changed (this is here the changed select element):
document.querySelectorAll('option[dependid="' + this.value + '"]');
Then you just need to loop over the selected options and do what ever you want with them, for example output them in a list (before that reset the list with result_list.innerHTML = '';).
Working example:
const select_element = document.querySelector('#Location');
const result_list = document.querySelector('#result-list');
select_element.addEventListener('change', function() {
const dependent_options = document.querySelectorAll('option[dependid="' + this.value + '"]');
result_list.innerHTML = '';
for (i = 0; i < dependent_options.length; i++) {
let list_item = document.createElement('LI');
list_item.textContent = dependent_options[i].textContent;
result_list.appendChild(list_item);
}
});
<ul id="result-list"></ul>
<select class="form-control dropdownlist" id="Location">
<option value="67" dependid="17">Amsterdam</option>
<option value="1" dependid="0">APAC</option>
<option value="20" dependid="3">Argentina</option>
<option value="23" dependid="4">Arizona</option>
<option value="40" dependid="26">Atlanta</option>
<option value="47" dependid="31">Austin</option>
<option value="5" dependid="1">Australia</option>
<option value="12" dependid="2">Austria</option>
<option value="54" dependid="8">Bangalore</option>
<option value="61" dependid="74">Bangkok</option>
<option value="69" dependid="19">Brighton</option>
<option value="71" dependid="20">Buenos Aires</option>
<option value="24" dependid="4">California</option>
<option value="21" dependid="3">Canada</option>
<option value="25" dependid="4">Canada - Cloud5</option>
<option value="41" dependid="27">Chicago</option>
<option value="6" dependid="1">China</option>
<option value="48" dependid="31">Dallas</option>
<option value="2" dependid="0">EMEA</option>
<option value="75" dependid="4">Florida</option>
<option value="15" dependid="2">France</option>
<option value="63" dependid="13">Frankfurt</option>
<option value="26" dependid="4">Georgia</option>
<option value="13" dependid="2">Germany</option>
<option value="55" dependid="8">Gurgaon</option>
<option value="7" dependid="1">Hong Kong</option>
<option value="27" dependid="4">Illinois</option>
<option value="8" dependid="1">India</option>
<option value="16" dependid="2">Italy</option>
<option value="37" dependid="75">Jacksonville</option>
<option value="9" dependid="1">Japan</option>
<option value="3" dependid="0">LACC</option>
<option value="42" dependid="76">Las Vegas</option>
<option value="70" dependid="19">London</option>
<option value="35" dependid="24">Los Angeles</option>
<option value="64" dependid="14">Madrid</option>
<option value="22" dependid="3">Mexico</option>
<option value="73" dependid="22">Mexico City</option>
<option value="56" dependid="8">Mumbai</option>
<option value="46" dependid="30">Nashville</option>
<option value="17" dependid="2">Netherlands</option>
<option value="76" dependid="4">Nevada</option>
<option value="28" dependid="4">New York</option>
<option value="43" dependid="28">New York</option>
<option value="38" dependid="75">Orlando</option>
<option value="57" dependid="9">Osaka</option>
<option value="29" dependid="4">Pennsylvania</option>
<option value="44" dependid="29">Philadelphia</option>
<option value="34" dependid="23">Phoenix</option>
<option value="66" dependid="16">Rome</option>
<option value="65" dependid="15">Rueil Malmaison</option>
<option value="36" dependid="25">Saint John</option>
<option value="49" dependid="32">Salt Lake City</option>
<option value="50" dependid="33">Seattle</option>
<option value="52" dependid="6">Shanghai</option>
<option value="10" dependid="1">Singapore</option>
<option value="59" dependid="10">Singapore</option>
<option value="14" dependid="2">Spain </option>
<option value="68" dependid="18">Stockholm</option>
<option value="39" dependid="75">Sunrise</option>
<option value="18" dependid="2">Sweden/Finland</option>
<option value="51" dependid="5">Sydney</option>
<option value="53" dependid="7">Taikoo Shing</option>
<option value="60" dependid="11">Taipei</option>
<option value="11" dependid="1">Taiwan</option>
<option value="30" dependid="4">Tennessee</option>
<option value="31" dependid="4">Texas</option>
<option value="74" dependid="1">Thailand</option>
<option value="58" dependid="9">Tokyo</option>
<option value="72" dependid="21">Toronto</option>
<option value="19" dependid="2">United Kingdom</option>
<option value="4" dependid="0">US</option>
<option value="32" dependid="4">Utah</option>
<option value="62" dependid="12">Vienna</option>
<option value="33" dependid="4">Washington</option>
<option value="45" dependid="29">Wilkes-Barre</option>
</select>

Answer 2

Here you have a solution using jquery. You have to obtain the options which dependid equals to the category selected. Then you have to iterate over these items.
$("#Location").change(function () {
var category= $(this).val();
console.log(category);
console.log("Dependant items: ");
var items = $("option[dependid='" + category + "']");
$.each( items, function( key, value ) {
console.log($(value).text());
});
});
Working example:
$("#Location").change(function () {
var category= $(this).val();
console.log(category);
console.log("Dependant items: ");
var items = $("option[dependid='" + category + "']");
$.each( items, function( key, value ) {
console.log($(value).text());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="result-list"></ul>
<select class="form-control dropdownlist" id="Location">
<option value="67" dependid="17">Amsterdam</option>
<option value="1" dependid="0">APAC</option>
<option value="20" dependid="3">Argentina</option>
<option value="23" dependid="4">Arizona</option>
<option value="40" dependid="26">Atlanta</option>
<option value="47" dependid="31">Austin</option>
<option value="5" dependid="1">Australia</option>
<option value="12" dependid="2">Austria</option>
<option value="54" dependid="8">Bangalore</option>
<option value="61" dependid="74">Bangkok</option>
<option value="69" dependid="19">Brighton</option>
<option value="71" dependid="20">Buenos Aires</option>
<option value="24" dependid="4">California</option>
<option value="21" dependid="3">Canada</option>
<option value="25" dependid="4">Canada - Cloud5</option>
<option value="41" dependid="27">Chicago</option>
<option value="6" dependid="1">China</option>
<option value="48" dependid="31">Dallas</option>
<option value="2" dependid="0">EMEA</option>
<option value="75" dependid="4">Florida</option>
<option value="15" dependid="2">France</option>
<option value="63" dependid="13">Frankfurt</option>
<option value="26" dependid="4">Georgia</option>
<option value="13" dependid="2">Germany</option>
<option value="55" dependid="8">Gurgaon</option>
<option value="7" dependid="1">Hong Kong</option>
<option value="27" dependid="4">Illinois</option>
<option value="8" dependid="1">India</option>
<option value="16" dependid="2">Italy</option>
<option value="37" dependid="75">Jacksonville</option>
<option value="9" dependid="1">Japan</option>
<option value="3" dependid="0">LACC</option>
<option value="42" dependid="76">Las Vegas</option>
<option value="70" dependid="19">London</option>
<option value="35" dependid="24">Los Angeles</option>
<option value="64" dependid="14">Madrid</option>
<option value="22" dependid="3">Mexico</option>
<option value="73" dependid="22">Mexico City</option>
<option value="56" dependid="8">Mumbai</option>
<option value="46" dependid="30">Nashville</option>
<option value="17" dependid="2">Netherlands</option>
<option value="76" dependid="4">Nevada</option>
<option value="28" dependid="4">New York</option>
<option value="43" dependid="28">New York</option>
<option value="38" dependid="75">Orlando</option>
<option value="57" dependid="9">Osaka</option>
<option value="29" dependid="4">Pennsylvania</option>
<option value="44" dependid="29">Philadelphia</option>
<option value="34" dependid="23">Phoenix</option>
<option value="66" dependid="16">Rome</option>
<option value="65" dependid="15">Rueil Malmaison</option>
<option value="36" dependid="25">Saint John</option>
<option value="49" dependid="32">Salt Lake City</option>
<option value="50" dependid="33">Seattle</option>
<option value="52" dependid="6">Shanghai</option>
<option value="10" dependid="1">Singapore</option>
<option value="59" dependid="10">Singapore</option>
<option value="14" dependid="2">Spain </option>
<option value="68" dependid="18">Stockholm</option>
<option value="39" dependid="75">Sunrise</option>
<option value="18" dependid="2">Sweden/Finland</option>
<option value="51" dependid="5">Sydney</option>
<option value="53" dependid="7">Taikoo Shing</option>
<option value="60" dependid="11">Taipei</option>
<option value="11" dependid="1">Taiwan</option>
<option value="30" dependid="4">Tennessee</option>
<option value="31" dependid="4">Texas</option>
<option value="74" dependid="1">Thailand</option>
<option value="58" dependid="9">Tokyo</option>
<option value="72" dependid="21">Toronto</option>
<option value="19" dependid="2">United Kingdom</option>
<option value="4" dependid="0">US</option>
<option value="32" dependid="4">Utah</option>
<option value="62" dependid="12">Vienna</option>
<option value="33" dependid="4">Washington</option>
<option value="45" dependid="29">Wilkes-Barre</option>
</select>

Answer 3

$(document).on("change","#Location",function(){
var val = $(this).val();
var arrayWithDependId=[];
$("#Location").find("option").each(function(){
var dependId = $(this).attr("dependid");
if(dependId==val){
arrayWithDependId.push($(this).text());
}
});
console.log(arrayWithDependId);
});