从下拉框更新文本框

Update text box from drop down box

本文关键字：更新 文本      更新时间：2024-02-16

我正试图根据下拉菜单中的选择来计算总价；产品价格可以保持不变。

由于某种原因，代码对我不起作用，我做错了什么？

<title>Untitled Document</title>
<script type="text/jscript">
$('#quantity').change(function(){
  var qty = $('#quantity').val();
  var price = $('#productPrice').val();
  var total = price * qty;
  $("#totalprice").val(total);
});
</script>
</head>
<body>
<div class="pricesection">
    <input type="hidden" id="productPrice" value="340"/>
Quantity: 
<select id="quantity">
    <option value="1" selected>1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
</select>
Total: $
<input type="text" id="totalprice" value="340"/>

</div>
</body>

select下拉列表中的值和使用javascript检索的输入字段都是字符串。使用parseInt()函数将它们转换为整数

var qty = parseInt($('#quantity').val());
var price = parseInt($('#productPrice').val());

或

var total = parseInt(price) * parseInt(qty);

此外，将脚本的类型更改为text/javascript，而不是text/jscript

您需要在html中引用jQuery库。

尝试以下

    <title>Untitled Document</title>
            <script type="text/jscript">
            $('#quantity').change(function(){
              var qty = $('#quantity').val();
              var price = $('#productPrice').val();
              var total = price * qty;
              $("#totalprice").val(total);
            });
            </script>
            </head>
            <body>


            <div class="pricesection">
                <input type="hidden" id="productPrice" value="340"/>
            Quantity: 
            <select id="quantity">
                <option value="1" selected>1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
            </select>
            Total: $
            <input type="text" id="totalprice" value="340"/>

            </div>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
            </body>

剩下的在我看来是档案。

谢谢，Paras

编辑

这是的一个片段

$('#quantity').change(function() {
  var qty = $('#quantity').val();
  var price = $('#productPrice').val();
  var total = price * qty;
  $("#totalprice").val(total);
});
<body>
  <div class="pricesection">
    <input type="hidden" id="productPrice" value="340" />Quantity:
    <select id="quantity">
      <option value="1" selected>1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
    </select>
    Total: $
    <input type="text" id="totalprice" value="340" />
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</body>

相关文章：