从同一个下拉列表中获取依赖的国家

Question

如果我们有一个下拉菜单，当我们选择任何项时，我们需要获取具有dependdid属性的记录，直到dependdid不等于0。下面是代码片段:

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

例如，如果我选择值为1的项目(项目:APAC)，相关国家将是澳大利亚，中国，香港，印度，日本，新加坡，台湾，泰国澳大利亚在祝辞值5>>进一步检查相关项目>>中国、香港、印度、日本、新加坡、台湾、泰国也一样请帮

Answer 1

您可以使用此element[attribute="value"]的属性选择器和select元素更改后的值(this是此处更改的select元素):

document.querySelectorAll('option[dependid="' + this.value + '"]');

然后你只需要循环选中的选项，并做任何你想做的事情，例如输出它们在一个列表中(在此之前重置列表与result_list.innerHTML = '';)。

工作的例子:

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

这里有一个使用jquery的解决方案。您必须获得与所选类别相关的选项。然后你必须遍历这些项。

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

工作的例子:

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