如何从数据库中获取值并在 javascript 的选择选项中显示它们

Question

我创建了下面的代码来计算从数据库中获取的数据。步骤：

获取 javascript 将用于从数据库中进行计算并使用 'u" value="' 显示的值 使用获取的值使用 javascript 进行计算。 'u'

我只需要获取这些值并使用它在 JavaScript 中进行计算，但没有任何反应。

以下代码获取数据和值

    <select name="urgency" id="urgency"  class="form-control"  onchange="caltotal()">
    <?php
    $query = $conn->query("SELECT idurgency,amount_added,value,hours_day FROM cww_avid_urgency");

    foreach ($query as $key => $row) {
    if ($row['idurgency'] == $post['urgency']) {
    echo '<option selected="selected" id="' . $row['idurgency'] . 'u" value="' . $row['idurgency'] . '"  title="' . $row['amount_added'] . '">' . $row['value'] . $row['hours_day'] . '</option>';
    }
    else {
    echo '<option selected="selected" id="' . $row['idurgency'] . 'u" value="' . $row['idurgency'] . '"  title="' . $row['amount_added'] . '">' . $row['value'] . $row['hours_day'] . '</option>';
    }
    }
    ?>
    </select>

下面是输入类型，显示计算后的值

            <input type="text" name="cpp" id="cpp" value="10.95" class="form-control" maxlength="14" readonly>
            <b>Currency Code</b>
    </div>
      <div class="col-sm-7">
            <input name="tamount" type="text" id="tamount" value="10.95" class="form-control" readonly>
            <b>Currency Code</b> &nbsp; &nbsp;
            <span class="tamount"></span>
     </div>

以下是执行计算并在选择时进行更改的脚本

<script type="text/javascript">
     function caltotal() {
      var x = document.getElementById("urgency").value;
       if (document.getElementById("urgency").value == 'u') {
  var  u = 10.95;
  document.getElementById("cpg").value =  +u;
  document.getElementById("ta").value =  +u;
  document.getElementById("np").value =  +u;
  } else if (document.getElementById("urgency").value == 'u') {
  var  u = 11.95;
  document.getElementById("cpg").value =  +u;
  document.getElementById("ta").value =  +u;
  document.getElementById("np").value =  +u;
  } else if (document.getElementById("urgency").value == 'u') {
  var  u = 12.95;
  document.getElementById("cpg").value =  +u;
  document.getElementById("ta").value =  +u;
  document.getElementById("np").value =  +u;
  } 
   </script>

我期望选择选择紧迫性时的结果。

Answer 1

这里有几处与您的代码不符。

1. foreach 循环中的 if 打印相同的结果，而不管 $row['idurgency'] 让它变得多余。
2. 选项标签不需要 id 属性，甚至可能导致 问题。 id 属性应该是唯一的，并且每个页面只分配一次。
3. 那么你的一些 javascript 也是多余的。

function caltotal() {
    var urgency = document.getElementById("urgency").value;
    var amount;
    if (urgency == 'u') {
        amount = 10.95;
    } else if (urgency == '?') {
        amount = 11.95;
    } else if (urgency == '??') {
        amount = 12.95;
    }

    document.getElementById("cpg").value += amount;
    document.getElementById("ta").value += amount;
    document.getElementById("np").value += amount;
}

只需确保页面上只有一个元素具有以下三个名称之一：cpg、ta、np。

我建议您为变量使用更具描述性的名称，从长远来看，这将对您有所帮助。