javascript - PHP中带标签select的操作

标签 javascript php mysql

怎么样,我尝试执行一个简单的运算(加法、减法或乘法)。 99 + 5 = 104 表格

<select> + <input> = result

在输入标签之间,没有问题,问题是当我有一个数字列表要从 BD 中选择时。

在 BD 中,可以使用以下数据。如您所见,折扣与您的 ID 不符。

Id discount
1   100
2   99
3   98
4   96
5   95

如果我要执行操作,在列出折扣时,标签

<option value = "<? PHP echo ''. $ row ['id'];?>"> <? PHP echo ''. $ row ['discount'];?> </ option>

操作是通过 id 而不是折扣来完成的。 一个总和的例子,我们选择99的折扣,然后插入5的金额正确的结果= 104。

问题在于,在操作时,它取的是 ID = 2 的值而不是 99,因此 2 + 5 = 7。

我在执行操作时的问题,因为我可以取折扣值而不是 Id。

<html>
<head>
<script language='javascript'>
function fadd(){
 n1=document.f1.cveDiscount.value;
 n2=document.f1.amount.value;
res=document.f1.resul.value;
res=parseInt(n1)+parseInt(n2);
document.f1.resul.value=res;

}
</script>
</head>
<body>
  <form name='f1' action="" method=POST>
  <label name=lblnum1>Num 1:</label>
  <select name="cveDiscount" class="form-control ">
    <?PHP

    if ($resultado = $mysqli->query("SELECT id,discount FROM discount  order by id desc", MYSQLI_USE_RESULT)) {

      while ($row = mysqli_fetch_array($resultado)){
        ?>
        <tr>
          <option value="<?PHP echo ''.$row['id'];?>"><?PHP echo ''.$row['discount'];?></option>
        </tr>
        <?PHP
      }
    }
    ?>
    <option value="#" selected>Select discount</option>
  </select>

  <label name=lblnum2>Num 2:</label>
  <input type=text name='amount'/>

  <input type=button value="   =   " onclick="fadd()">

  <input type=text name='resul'/>

</form>
</body>
</html>

最佳答案

您可以使用:

selectedOptions: ...contains a list of the elements contained within the element that are currently selected. The list of selected options is an HTMLCollection object with one entry per currently selected option.

因此,您可以更改:

n1=document.f1.cveDiscount.value;

到:

n1 = document.f1.cveDiscount.selectedOptions[0].textContent;

无论如何我建议使用.addEventListener()在 dom 准备好而不是内联事件处理程序。

片段:

document.addEventListener('DOMContentLoaded', function(e) {
   document.querySelector('[type=button]').addEventListener('click', function(e) {
        n1 = document.f1.cveDiscount.selectedOptions[0].textContent;
        n2 = document.f1.amount.value;
        res = document.f1.resul.value;
        res = parseInt(n1) + parseInt(n2);
        document.f1.resul.value = res;
    })
})
<form name='f1' action="" method=POST>
    <label name=lblnum1>Num 1:</label>
    <select name="cveDiscount" class="form-control ">
        <option value="1">100</option>
        <option value="2">99</option>
        <option value="3">98</option>
        <option value="4">96</option>
        <option value="5">95</option>
        <option value="#" selected>Select discount</option>
    </select>
    <label name=lblnum2>Num 2:</label>
    <input type=text name='amount'/>
    <input type=button value="   =   ">
    <input type=text name='resul'/>
</form>

关于javascript - PHP中带标签select的操作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54611412/

相关文章:

javascript - D3.js 鼠标悬停事件也应该到达圆圈的内部区域

javascript - 如何从 onChange() 事件获取 Prop ?

php - 获取多文件上传文件的名称

php - 如何在 php 中从 mysql 数据库生成图形和图表

mysql - 按不同的键子集分组

javascript - JavaScript 中的简写 bool 逻辑

javascript - Protractor executeScript 与 ElementArrayFinder 的怪异

php - paypal 沙盒测试不返回自动和支付失败错误

php - PHP是否可以同时解析多个函数?

mysql - 主机 'XXX' 不允许连接到此 MySQL 服务器 (V.8)