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

Question

我有一个包含大量选项的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:根据另一个下拉列表的值更改droplist的值我需要一些关于它的基本内容.是否可以只使用JavaScript？

Answer 1

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

\n

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

\n

\r\n

\r\n

const prices = {"apple":[{value:3,desc:"Apple 1kg 3&euro;"},{value:5,desc:"Apple 2kg 5&euro;"},{value:7,desc:"Apple 3kg 7&euro;"}],\n             "banana":[{value:3,desc:"Banana 2kg 3.5&euro;"},{value:5,desc:"Banana 4kg 7&euro;"},{value:7,desc:"Banana 5kg 11&euro;"}],\n             "peach":[{value:3,desc:"Peach 1.5kg 3&euro;"},{value:5,desc:"Peach 3kg 6&euro;"},{value:7,desc:"Peach 4kg 7&euro;"}]}\n\nconst price = document.querySelector(\'[name=price]\');\ndocument.querySelector(\'[name=fruit]\').addEventListener(\'change\', function(e) {\n  price.innerHTML = prices[this.value].reduce((acc, elem) => `${acc}<option value="${elem.value}">${elem.desc}</option>`, "");\n});

\r\n

<select name="fruit">\n  <option value="apple">Apple</option>\n  <option value="banana">Banana</option>\n  <option value="peach">Peach</option>\n</select>\n<br />\n<select name="price">\n  <option value="3">Apple 1kg 3\xe2\x82\xac</option>\n  <option value="5">Apple 2kg 5\xe2\x82\xac</option>\n  <option value="7">Apple 3kg 7\xe2\x82\xac</option>\n</select>

\r\n

\r\n

\r\n

\n

如果您觉得使用起来不舒服，.reduce()可以使用常规的 for 循环：

\n

...  \nlet options = "";\nfor(const obj of prices[this.value]) {\n  options += \'<option value="\' +obj.value +\'">\' +obj.desc +\'</option>\';\n}\nprice.innerHTML = options;\n...\n

\n