[英]Creating the three level dependent drop-down list with array of objects using JavaScript
我正在從我從API(動態數據)獲取的對象數組中創建三級下拉列表。 我嘗試從ssmlGender(語音性別)字段中刪除重復的值,並嘗試了其他方法。 但是,無法獲取正確的數據。
在第一個下拉列表中,我顯示“ ssmlGender”字段中的性別:“女性”和“男性”。 當用戶在第一個下拉列表中選擇男性或女性時,必須在第二個下拉列表中填充特定性別可用的“ languageCodes”。 選擇語言代碼后,應顯示具有所選性別和語言代碼的“名稱”字段。
樣本數組:
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>');*/
}
非常感謝。
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>
還有其他方法可以同時比較“語言”和“性別”字段並根據其顯示結果嗎?
我已經像這樣重寫了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>`
})
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.