使用 JavaScript 创建包含对象数组的三级依赖下拉列表答案

【问题标题】：Creating the three level dependent drop-down list with array of objects using JavaScript使用 JavaScript 创建包含对象数组的三级依赖下拉列表
【发布时间】：2018-11-28 09:58:40
【问题描述】：

我正在从从 API（动态数据）获取的对象数组中创建三层下拉列表。我尝试从 ssmlGender(Voice gender) 字段中删除重复值，并尝试了不同的方法。但是，无法获取正确的数据。

在第一个下拉列表中，我显示性别：“ssmlGender”字段中的“女性”和“男性”。当用户在第一个下拉列表中选择男性或女性时，第二个下拉列表必须填充特定性别可用的“语言代码”。选择语言代码时，应显示具有所选性别和语言代码的“名称”字段。

样本数组：

0: {languageCodes: Array(1), name: "es-ES-Standard-A", ssmlGender: "FEMALE", naturalSampleRateHertz: 24000}
1:
{languageCodes: Array(1), name: "it-IT-Standard-A", ssmlGender: "FEMALE", naturalSampleRateHertz: 24000}
2:
{languageCodes: Array(1), name: "ja-JP-Standard-A", ssmlGender: "FEMALE", naturalSampleRateHertz: 22050}
3:
{languageCodes: Array(1), name: "ko-KR-Standard-A", ssmlGender: "FEMALE", naturalSampleRateHertz: 22050}
8:{languageCodes: Array(1), name: "en-US-Wavenet-D", ssmlGender: "MALE", naturalSampleRateHertz: 24000}
9:
{languageCodes: Array(1), name: "en-US-Wavenet-A", ssmlGender: "MALE", naturalSampleRateHertz: 24000}
10:
{languageCodes: Array(1), name: "en-US-Wavenet-B", ssmlGender: "MALE", naturalSampleRateHertz: 24000}
11:
{languageCodes: Array(1), name: "en-US-Wavenet-C", ssmlGender: "FEMALE", naturalSampleRateHertz: 24000}
12:
{languageCodes: Array(1), name: "en-US-Wavenet-E", ssmlGender: "FEMALE", naturalSampleRateHertz: 24000}
13:
{languageCodes: Array(1), name: "en-US-Wavenet-F", ssmlGender: "FEMALE", naturalSampleRateHertz: 24000}
14:
{languageCodes: Array(1), name: "en-GB-Standard-A", ssmlGender: "FEMALE", naturalSampleRateHertz: 24000}
15:
{languageCodes: Array(1), name: "en-GB-Standard-B", ssmlGender: "MALE", naturalSampleRateHertz: 24000}

当我们单击特定数组时，它将显示此链接中给出的数据：https://imgur.com/HfQ3bsw

我的 HTML：

 <div class="row">
                <label>Voice Gender</label>
                <div class="input-field col s12">                    
                    <select id="gender">
                            <option value="" selected>Choose your option</option>                                                     
                            </select>
                </div>
        </div>

        <div class="row">
                <label>Voice Language</label>
                <div class="input-field col s12">
                    <select id="languages">
                        <option value="" selected>Choose your languages</option>
                    </select>
                </div>
            </div>

        <div class="row">
                <label>Voice Name</label>
                <div class="input-field col s12">                    
                    <select id="entries">
                            <option value="" selected>Choose your option</option>                           
                            </select>
                </div>
        </div>

我的 JavaScript：

for(var i=0;i<response.result.voices.length;i++){
         var values= response.result.voices;

            //To remove the duplicate value of "Male" and "Female" iteration and to display only once. 

            var valueArr = values.map(function(item){ return item.ssmlGender });
                    var isDuplicate = valueArr.some(function(item, idx){ 
                        return valueArr.indexOf(item) != idx 
                    });
                    console.log(isDuplicate);
$('#entries').append('<option value='+(i+1)+'>' + response.result.voices[i].name+ '</option>');


        //Added custom options of "MALE" AND "FEMALE" directly into the voice gender field of HTML to remove the duplicate values.But, it didn't work out. 

        /*if(document.getElementById("gender").value=="FEMALE"){
             if(response.result.voices[i].ssmlGender=="FEMALE")
               {
                 finalLanguages=response.result.voices[i].languageCodes;
                 }                            
               }
        if(document.getElementById("gender").value =="MALE"){
              if(response.result.voices[i].ssmlGender=="MALE")
                   {
                     finalLanguages=response.result.voices[i].languageCodes;
                     }
                  }                 
   $("#languages").append('<option value=' + (i+1)+ '>'+finalLanguages+ '</option>');*/
                          }

非常感谢。

【问题讨论】：

标签： javascript html dynamic drop-down-menu

【解决方案1】：

let languageCodes = [
{ languageCodes: ['123'], name: 'es-ES-Standard-A', ssmlGender: 'FEMALE', naturalSampleRateHertz: 2403},
{languageCodes: ['214'], name: 'it-IT-Standard-A', ssmlGender: 'MALE', naturalSampleRateHertz: 21000},
{languageCodes: ['147'], name: 'ja-JP-Standard-A', ssmlGender: 'FEMALE', naturalSampleRateHertz: 3200},
{languageCodes: ['290'], name: 'ko-KR-Standard-A', ssmlGender: 'MALE', naturalSampleRateHertz: 2330},
{languageCodes: ['173'], name: 'en-US-Wavenet-B', ssmlGender: 'FEMALE', naturalSampleRateHertz: 412},
{languageCodes: ['583'], name: 'en-GB-Standard-A', ssmlGender: 'MALE', naturalSampleRateHertz: 8493}
];

// Register Change listeners
function registerEventListeners() {
 document.getElementById('gender').addEventListener('change',  changeVoiceLanguageOption, false);
 document.getElementById('languages').addEventListener('change',  changeVoiceNameOption, false);
}

function changeVoiceNameOption() {
	const valueSelected = document.getElementById('languages').value;
  let entriesElement = document.getElementById('entries');
  entriesElement.innerHTML = '';
  entriesElement.innerHTML += '<option value="" selected>Choose your option</option>'
  
  languageCodes.filter(( item ) => {
    return item.languageCodes.includes(valueSelected);
  }).forEach(( item ) => {
  	entriesElement.innerHTML += `<option value="${item.name}"> ${item.name} </option>`
  })
}

function changeVoiceLanguageOption() {
 const valueSelected = document.getElementById('gender').value;
 let languageElement = document.getElementById('languages');
 languageElement.innerHTML = ''; // This is what prevents duplication
 languageElement.innerHTML += '<option value="" selected>Choose your languages</option>'
  
  languageCodes.filter(( item ) => {
    return item.ssmlGender === valueSelected;
  }).forEach(( filteredItems ) => {
  	filteredItems.languageCodes.forEach(( languageCode ) => {
    	languageElement.innerHTML += `<option value="${languageCode}"> ${languageCode} </option>`
    })
  })
  
  
}

function populateGender() {

let genderElement = document.getElementById('gender');
  let genderObject = {};
  languageCodes.forEach(( item ) => {
    genderObject[item.ssmlGender] = '';
  })
  Object.keys(genderObject).forEach(( item ) => {
    genderElement.innerHTML += `<option value="${item}"> ${item} </option>`
  })
}

registerEventListeners();
populateGender();

<div class="row">
                <label>Voice Gender</label>
                <div class="input-field col s12">                    
                    <select id="gender">
                            <option value="" selected>Choose your option</option>                                                     
                            </select>
                </div>
        </div>

        <div class="row">
                <label>Voice Language</label>
                <div class="input-field col s12">
                    <select id="languages">
                        <option value="" selected>Choose your languages</option>
                    </select>
                </div>
            </div>

        <div class="row">
                <label>Voice Name</label>
                <div class="input-field col s12">                    
                    <select id="entries">
                            <option value="" selected>Choose your option</option>                           
                            </select>
                </div>
        </div>

【讨论】：

谢谢！性别字段和姓名字段效果很好。但是，在“语言”字段中得到重复 - 第二个字段。附上截图：imgur.com/4kT6asd。该数组还包含“LanguageCodes”作为主要帖子 imgur 链接中给出的对象之一。因此，当我尝试使用其他名称时（例如：responseArray，为了避免数组元素冲突），我根本没有在“语言”字段中获取任何元素。
我尝试使用 Set、Object.Key 和其他方法，我无法消除“语言”代码第二字段中的重复。有没有其他方法可以删除重复项？
在上面的代码中，我通过设置 innerHTML = ''" const valueSelected = document.getElementById('gender').value; let languageElement = document.getElementById('languages'); 消除了重复。 languageElement.innerHTML = '';
您可以将您拥有的代码与数据一起粘贴。让我看看
我用 Set 函数创建了唯一的数组来迭代和存储这样的值：var uniq= [...new Set(langArray)]; uniq.forEach((item)=>{ languageElement.innerHTML += ` })` 它奏效了。但是，第三个字段“名称”通过包含两个性别的值，仅显示与“语言”对应的值。

【解决方案2】：

有没有其他方法可以比较“语言”和“性别”字段并根据它显示结果？

我已经像这样重写了 changeVoiceNameOption()。我无法得到结果。

        function changeVoiceNameOption() {
genderSelected=document.getElementById('gender').value;
        const languageSelected = document.getElementById('languages').value;
        let entriesElement = document.getElementById('entries');
        entriesElement.innerHTML = '';
        entriesElement.innerHTML += '<option value="" selected>Choose your option</option>'
        var nameArray=[];
    languageCodes.filter(( item ) => {
    return item.ssmlGender.includes(genderSelected);
    }).forEach(( filteredItems ) =>  {filteredItems.languageCodes.forEach(( languageCode ) => {return filteredItems.languageCodes.includes(languageSelected);                        
    })
     }).forEach(( filteredItems ) =>  {
    entriesElement.innerHTML += `<option value="${item.name}"> ${item.name} </option>`
    })
     }

【讨论】：

languageSelected.innerHTML = '';你能做到吗