html表单中下拉列表,javascript – 根据同一html表单中的另一个下拉列表填写下拉列表...

您可以使用一个对象来保存值以及相关的下拉列表描述.为此,首先需要在下拉列表中添加一个eventListener,以便在选择新水果时检测到更改.使用此事件侦听器,您可以检索使用this.value选择的选项的值.

使用所选选项中的值,您可以继续从名为price的对象中获取其关联的下拉值(这将返回一个数组).一旦你有了这个数组,就可以循环遍历它并使用.reduce()“构建”一串HTML作为price select标签的选项.一旦你构建了这个字符串,就可以使用.innerHTML将它附加到select标签内,它将你的HTML字符串“转换”为DOM对象(真实元素而不仅仅是文本)：

let prices = {"apple":[{value:3,desc:"Apple 1kg 3€"},{value:5,desc:"Apple 2kg 5€"},{value:7,desc:"Apple 3kg 7€"}],

"banana":[{value:3,desc:"Banana 2kg 3.5€"},{value:5,desc:"Banana 4kg 7€"},{value:7,desc:"Banana 5kg 11€"}],

"peach":[{value:3,desc:"Peach 1.5kg 3€"},{value:5,desc:"Peach 3kg 6€"},{value:7,desc:"Peach 4kg 7€"}]}

document.getElementsByName('fruit')[0].addEventListener('change', function(e) {

document.getElementsByName('price')[0].innerHTML = prices[this.value].reduce((acc, elem) => `${acc}${elem.desc}`, "");

});

Apple

Banana

Peach

Apple 1kg 3€

Apple 2kg 5€

Apple 3kg 7€

如果您觉得使用.reduce()感觉不舒服,可以使用常规for循环：

document.getElementsByName('fruit')[0].addEventListener('change', function(e) {

let options = "";

for(obj of prices[this.value]) {

options += '' +obj.desc +'';

}

document.getElementsByName('price')[0].innerHTML = options;

});