jquery 如何根据用JavaScript数组创建的数组中的值动态输出HTML值？

xuo3flqw 于 11个月前发布在 jQuery

关注(0)|答案(2)|浏览(122)

我是新的JavaScript和学习。我试图创建一个位置列表，当选择时，运输成本将动态显示每个位置。enter image description here
这是我的密码
超文本标记语言：

<select name="city" id="city">
    <option value="-">Choose city</option>
</select>

<p>Your estimated shipping cost: </p>
<p id="output"></p>

字符串
JavaScript：

// Add location array to city dropdown
var select_city = document.getElementById("city");

var city = ["Location 1";"Location 2";"Location 3"];

for(var i = 0; i < city.length; i++) {
    let opt = city[i];
    let el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
    select_city.appendChild(el);
};

// I'm stuck here at the moment, I don't know how to output dynamically base on selected
var chosen_city = select_city.options[select_city.selectedIndex].value;

if (chosen_city == "Location 1") {
    document.getElementById("output").innerHTML = "10 USD";
} else if (chosen_city == "Location 2") {
    document.getElementById("output").innerHTML = "20 USD";
} else {
    document.getElementById("output").innerHTML = "30 USD";
};

型
希望有人可以帮助，因为我真的不知道如何搜索这个问题在这里与正确的关键字！提前感谢！：）
我尝试使用if和function（），但它不能动态更改。

jquery

来源：https://stackoverflow.com/questions/77631924/how-to-output-html-value-dynamically-base-on-values-from-a-dropdown-created-with

2条答案

按热度按时间

yk9xbfzb1#

我在你的JavaScript代码中看到了一些问题和需要改进的地方。让我们来看看它们：

**1.数组声明：**在JavaScript中，数组元素之间用逗号分隔，而不是用逗号分隔，所以var city = ["Location 1";"Location 2";"Location 3"];行应该是var city = ["Location 1", "Location 2", "Location 3"];。
**2.下拉列表的事件监听：**您需要在下拉列表中添加事件监听器，以检测所选选项何时发生变化。您当前代码中没有此功能。
**3.动态输出：**根据所选城市确定运费的逻辑应该在事件监听器内部，所以每次选择新选项时都会触发。

以下是如何修改JavaScript代码：

// Add location array to city dropdown
var select_city = document.getElementById("city");

var city = ["Location 1", "Location 2", "Location 3"];

for (var i = 0; i < city.length; i++) {
    let opt = city[i];
    let el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
    select_city.appendChild(el);
}

// Event listener for dropdown change
select_city.addEventListener('change', function() {
    var chosen_city = this.value; // Get the currently selected city

    if (chosen_city == "Location 1") {
        document.getElementById("output").innerHTML = "10 USD";
    } else if (chosen_city == "Location 2") {
        document.getElementById("output").innerHTML = "20 USD";
    } else if (chosen_city == "Location 3") {
        document.getElementById("output").innerHTML = "30 USD";
    } else {
        document.getElementById("output").innerHTML = ""; // Clear the output if no city is selected
    }
});

字符串
这段代码将动态更新运输成本时，一个不同的城市是从选择的运费。

赞(0）回复(0）举报 11个月前

uqcuzwp82#

1.创建一个对象数组来建模HTML <option />元素（即text，value）
1.迭代数组并为每个位置创建一个新的<option />元素，将其添加到数组中。
1.将一个事件侦听器添加到事件管理器中，以便在更改时，输出元素会使用相应位置的.value进行更新。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Shipping</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <script type="module" src="script.js"></script>
  </head>
  <body>
    <main>
      <label for="location">Choose a Location:</label>
      <select id="location"></select>
      <p>Your estimated shipping cost: <span id="output"></span></p>
    </main>
  </body>
</html>

字符串
JavaScript Example

const locations = [
  { text: '-- Choose Location --', value: '' },
  { text: 'Location 1', value: '10 USD' },
  { text: 'Location 2', value: '20 USD' },
  { text: 'Location 3', value: '30 USD' },
];

const dropdown = document.getElementById('location');

locations.forEach(
  (location, id) => (dropdown[id] = new Option(location.text, id.toString()))
);

dropdown.addEventListener('change', (evt) => {
  document.getElementById('output').innerHTML =
    locations[evt.currentTarget.value].value;
});

型
TypeScript Example的

type Options = Array<{
  text: string;
  value: string;
}>;

const locations: Options = [
  { text: '-- Choose Location --', value: '' },
  { text: 'Location 1', value: '10 USD' },
  { text: 'Location 2', value: '20 USD' },
  { text: 'Location 3', value: '30 USD' },
];

const dropdown = document.getElementById('location');

locations.forEach(
  (location, id) => (dropdown[id] = new Option(location.text, id.toString()))
);

dropdown.addEventListener('change', (evt) => {
  document.getElementById('output').innerHTML =
    locations[evt.currentTarget.value].value;
});

型

赞(0）回复(0）举报 11个月前

我来回答

jquery 如何根据用JavaScript数组创建的数组中的值动态输出HTML值？

2条答案

相关问题

热门标签

最新问答