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

我有一个 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，从我在这里可以读到的内容：根据另一个下拉列表的值更改下拉列表的值 https://stackoverflow.com/questions/42412353/changing-value-of-droplist-based-on-the-value-of-another-dropdown-list我需要一些基本的东西。是否可以仅使用 JavaScript 来完成此操作？

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

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

const 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€"}]}

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;
...