设置价格为 select 选项等于

Question

这是我的项目的代码：

<!DOCTYPE html>
<html>
<head>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>Merc</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>
    <select id="merc" name="merc[]" onchange="getPris()">
    <option hidden disabled selected value></option>
    <option value="apple12">Apple</option>
    <option value="banana33">Banana</option>
    <option value="pear1">Pear</option>
    <option value="fish5">Fish</option>
    </select>
    </td>
    <td><p name="prislabel[]"></p></td>
  </tr>
  <tr>
    <td>
    <select id="merc" name="merc[]" onchange="getPris()">
    <option hidden disabled selected value></option>
    <option value="apple12">Apple</option>
    <option value="banana33">Banana</option>
    <option value="pear1">Pear</option>
    <option value="fish5">Fish</option>
    </select>
    </td>
    <td><p name="prislabel[]"></p></td>
  </tr>
  <tr>
    <td>
    <select id="merc" name="merc[]" onchange="getPris()">
    <option hidden disabled selected value></option>
    <option value="apple12">Apple</option>
    <option value="banana33">Banana</option>
    <option value="pear1">Pear</option>
    <option value="fish5">Fish</option>
    </select>
    </td>
    <td><p name="prislabel[]"></p></td>
  </tr>
  <tr>
    <td>
    <select id="merc" name="merc[]" onchange="getPris()">
    <option hidden disabled selected value></option>
    <option value="apple12">Apple</option>
    <option value="banana33">Banana</option>
    <option value="pear1">Pear</option>
    <option value="fish5">Fish</option>
    </select>
    </td>
    <td><p name="prislabel[]"></p></td>
  </tr>
  <tr>
    <td>
    <select id="merc" name="merc[]" onchange="getPris()">
    <option hidden disabled selected value></option>
    <option value="apple12">Apple</option>
    <option value="banana33">Banana</option>
    <option value="pear1">Pear</option>
    <option value="fish5">Fish</option>
    </select>
    </td>
    <td><p name="prislabel[]"></p></td>
  </tr>
  <tr>
    <td>
    <select id="merc" name="merc[]" onchange="getPris()">
    <option hidden disabled selected value></option>
    <option value="apple12">Apple</option>
    <option value="banana33">Banana</option>
    <option value="pear1">Pear</option>
    <option value="fish5">Fish</option>
    </select>
    </td>
    <td><p name="prislabel[]"></p></td>
  </tr>
</table>

</body>
</html>

<script>

function getPris() {
$(document.querySelectorAll('select[name="merc[]"]')).each(function(i,obj) {

if (document.getElementsByName("merc[]")[i].value == "apple12") {
        document.getElementById("prislabel").innerHTML = "499";
    }
        
});
}

</script>

我要做的是以下内容：如果用户 select 例如来自选项的 Apple，我希望同一行上的priceLabel为 499，-。 如果该行之后的下一行也是 Apple，我希望第二行的priceLabel为 249，-。 因此，如果有两行具有相同的选项值，我希望第二行的价格为 249，-.，如果也是 Apple。 如果用户 select 香蕉，我想要价格 699，- 和新行 249，- 如果是香蕉。

我已经尝试了一些你可以在代码中看到的东西，但是代码不起作用。

Answer 1

我确实相信您的代码中的问题是您获取元素和循环的方式。

我在下面改进了您的代码，并更改了一些class和id ：

注意：最好将 CSS 和 JavaScript 文件放在不同的文件中。 在这种情况下，我将所有三个文件放在同一个文件夹中。

HTML（文件名： index.html ）：

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css"> <!-- THIS LINE IS TO CONNECT TO THE CSS FILE -->
    <title>Document</title>
  </head>
    <body>
        <table>
            <tr>
                <th>Goods</th>
                <th>Price</th>
      </tr>
      <!-- FIRST ROW ========================== -->
            <tr>
                <td>
                    <select class="goods" onchange="seePrice()">
                        <option hidden disabled selected value>>-- Select Item --<</option>
                        <option value="apple">Apple</option>
                        <option value="banana">Banana</option>
                        <option value="pear">Pear</option>
                        <option value="fish">Fish</option>
                    </select>
                </td>
                <td>
                    <p class="prislabel">$0.0</p>
                </td>
      </tr>
      <!-- SECOND ROW ========================== -->
            <tr>
                <td>
                    <select class="goods" onchange="seePrice()">
                        <option hidden disabled selected value>>-- Select Item --<</option>
                        <option value="apple">Apple</option>
                        <option value="banana">Banana</option>
                        <option value="pear">Pear</option>
                        <option value="fish">Fish</option>
                    </select>
                </td>
                <td>
                    <p class="prislabel">$0.0</p>
                </td>
      </tr>
      <!-- THIRD ROW========================== -->
            <tr>
                <td>
                    <select class="goods" onchange="seePrice()">
                        <option hidden disabled selected value>>-- Select Item --<</option>
                        <option value="apple">Apple</option>
                        <option value="banana">Banana</option>
                        <option value="pear">Pear</option>
                        <option value="fish">Fish</option>
                    </select>
                </td>
                <td>
                    <p class="prislabel">$0.0</p>
                </td>
      </tr>
            <!-- YOU CAN ADD MORE ROW BELOW THIS LINE ========================== -->
    </table>
    <script src="function.js"></script> <!-- THIS LINE IS TO CONNECT TO THE JS FILE -->
    </body>
</html>

CSS（文件名： styles.css ）：

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}

JavaScript（文件名： function.js ）：

function seePrice() {
  const selectedItem = document.getElementsByClassName("goods");
  const priceTag = document.getElementsByClassName("prislabel");


  for (var i = 0; i < priceTag.length; i++){
    if (selectedItem[i].value == "apple") {
      priceTag[i].innerHTML = "$6.90";
    } else if (selectedItem[i].value == "banana"){
      priceTag[i].innerHTML = "$5.90";
    } else if (selectedItem[i].value == "pear"){
      priceTag[i].innerHTML = "$3.90";
    } else if (selectedItem[i].value == "fish"){
      priceTag[i].innerHTML = "$8.90";
    }
  }
}

你可以在这里看到现场演示

设置价格为 select 选项等于

问题描述

1 个解决方案

解决方案1
1 2020-12-12 03:16:01

设置价格为 select 选项等于

问题描述

1 个解决方案

解决方案1 1 2020-12-12 03:16:01

解决方案1
1 2020-12-12 03:16:01