gpt4 book ai didi

javascript - 根据同一 html 表单中的另一个下拉列表填充下拉列表

转载 作者:太空狗 更新时间:2023-10-29 16:38:36 24 4
gpt4 key购买 nike

我有一个 HTML 表单,里面有很多选项,我想根据以前的用户选择更改这些选项中的值:假设我有这样的事情:

<select name="fruit">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="peach">Peach</option>
</select>

根据用户在那里选择的内容,我希望在这个显示不同值的下拉列表之后有另一个下拉列表。如果用户在第一个下拉列表中选择“Apple”,则如下所示:

<select name="price">
<option value="3">Apple 1kg 3€</option>
<option value="5">Apple 2kg 5€</option>
<option value="7">Apple 3kg 7€</option>
</select>

如果他选择“香蕉”,会是这样的:

<select name="price">
<option value="4">Banana 1kg 4€</option>
<option value="7">Banana 2kg 7€</option>
<option value="10">Banana 3kg 10€</option>
</select>

值和文本需要根据第一个下拉列表进行更改,因为香蕉的价格与苹果等不同。我读了一些关于它的话题,但我真的无法理解我需要什么来实现这一点。我以前从未接触过 ajax,从我在这里可以读到的内容来看:Changing value of droplist based on the value of another dropdown list我需要一些基本的东西。是否可以仅使用 JavaScript 来实现?

最佳答案

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

使用所选选项中的 value,您可以继续从名为 prices 的对象(这将返回一个数组)中获取其关联的下拉列表的值。获得此数组后,您可以遍历它并使用 .reduce() “构建”一个 HTML 字符串作为 price 选择标签的选项.构建此字符串后,您可以使用 .innerHTML 将其附加到 select 标记内,这会将您的 HTML 字符串“转换”为 DOM 对象(实际元素而不仅仅是文本):

const prices = {"apple":[{value:3,desc:"Apple 1kg 3&euro;"},{value:5,desc:"Apple 2kg 5&euro;"},{value:7,desc:"Apple 3kg 7&euro;"}],
"banana":[{value:3,desc:"Banana 2kg 3.5&euro;"},{value:5,desc:"Banana 4kg 7&euro;"},{value:7,desc:"Banana 5kg 11&euro;"}],
"peach":[{value:3,desc:"Peach 1.5kg 3&euro;"},{value:5,desc:"Peach 3kg 6&euro;"},{value:7,desc:"Peach 4kg 7&euro;"}]}

const price = document.querySelector('[name=price]');
document.querySelector('[name=fruit]').addEventListener('change', function(e) {
price.innerHTML = prices[this.value].reduce((acc, elem) => `${acc}<option value="${elem.value}">${elem.desc}</option>`, "");
});
<select name="fruit">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="peach">Peach</option>
</select>
<br />
<select name="price">
<option value="3">Apple 1kg 3€</option>
<option value="5">Apple 2kg 5€</option>
<option value="7">Apple 3kg 7€</option>
</select>

如果您不习惯使用 .reduce(),您可以改用常规的 for 循环:

...  
let options = "";
for(const obj of prices[this.value]) {
options += '<option value="' +obj.value +'">' +obj.desc +'</option>';
}
price.innerHTML = options;
...

关于javascript - 根据同一 html 表单中的另一个下拉列表填充下拉列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53410084/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com