Get dependent countries from same dropdown-CodePudding

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  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

CodePudding user response：

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  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>

CodePudding user response：

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());
   });
});