根据同一 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，从我可以在这里阅读到的内容： Changing value of droplist of droplist based on another dropdown list我需要一些关于它的基本内容。 是否可以仅使用 JavaScript 来实现？

Answer 1

您可以使用一个对象来保存值及其相关下拉列表的描述来实现这一点。 为此，您首先需要在下拉列表中添加一个事件侦听器，以便在您挑选新水果时检测到变化。 使用更改事件侦听器，您可以检索使用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;
...

Answer 2

这是使用 JQuery 创建元素和 onchange 事件的附加解决方案

 // First we initialize a variable with the fruits and their prices per kg fruitPrices = {'apple':[3, 5, 6], 'banana':[4, 7, 10]} // Listen to changes in selected fruit $('#fruit-selector').on('change', function(element) { // Clearing the price selector and getting the selected fruit $('#price-selector').empty() chosenFruit = this.value; // For each price in the fruitPrices for this fruit for (fruitIndex in fruitPrices[chosenFruit]) { // Get the price and create an option element for it price = fruitPrices[chosenFruit][fruitIndex]; price_option = '<option>{0} {1}kg {2}$<option>'.replace('{0}', chosenFruit).replace('{1}', fruitIndex + 1).replace('{2}', price); // Add the option to the price selector $('#price-selector').append(price_option) } })

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id='fruit-selector' name="fruit"> <option value="apple">Apple</option> <option value="banana">Banana</option> <option value="peach">Peach</option> </select> <select id='price-selector' name="price"> </select>

Answer 3

 console.clear(); (function() { var fruitsField = document.querySelector('[name=fruits]') var amountField = document.querySelector('[name=amount]') var json = {}; onReady(loadJson); fruitsField.addEventListener('change', populateAmount) function onReady(callback) { if ( document.readyState === "complete" || (document.readyState !== "loading" && !document.documentElement.doScroll) ) { callback(); } else { document.addEventListener("DOMContentLoaded", callback); } } function getSelectedFruit() { return fruitsField.value; } function populateFruits() { clearOptions(fruitsField) fruits = json.fruits for (var i in fruits) { addOption(fruitsField, i, fruits[i]) } } function populateAmount() { clearOptions(amountField) var fruit = getSelectedFruit() fruits = json.fruits prices = json.prices[fruit] for (var i in prices) { addOption(amountField, i, fruits[fruit] + " " + i + "kg " + prices[i] + "€") } } // Load a json resource and start the fruit process function loadJson() { fetch('//api.jsonbin.io/b/5bf5645b746e9b593ec0e8b5') .then(function(response) { return response.json() }) .then(function(response) { json = response populateFruits() }) .catch(function(err) { console.error(err); }) } // function loadJson() { // var j = '{"fruits":{"apple":"Apples","banana":"Bananas","peach":"Peaches"},"prices":{"apple":{"1":3,"2":5,"3":7},"banana":{"1":4,"2":7,"3":10},"peach":{"1":5,"2":9,"3":13}}}' // json = JSON.parse(j) // populateFruits() // } function addOption(select, value, text) { var option = document.createElement('option') option.setAttribute('value', value) option.textContent = text select.appendChild(option) } function clearOptions(select) { var children = select.children var childrenToRemove = []; for (var i = 1; i < children.length; i++) { childrenToRemove.push(children[i]) } for (var i = 0; i < childrenToRemove.length; i++) { select.removeChild(childrenToRemove[i]) } } }())

 <form> <select name="fruits" size="4"> <option value="0">Select Fruit</option> </select> <select name="amount" size="4"> <option value="0" >Select Amount</option> </select> </form>

Answer 4

<label>Choose an ice cream flavor:
  <select class="ice-cream" name="ice-cream">
    <option value="">Select One …</option>
    <option value="chocolate">Chocolate</option>
    <option value="sardine">Sardine</option>
    <option value="vanilla">Vanilla</option>
  </select>
</label>

<div class="result"></div>

const selectElement = document.querySelector('.ice-cream');

selectElement.addEventListener('change', (event) => {
  const result = document.querySelector('.result');
  result.textContent = `You like ${event.target.value}`;
});