Question

我正在尝试根据产品和数量选择获得总和......

我有这个......

＆＃13;

input,select{outline:none}
.products{width:200px;border:1px solid;}
.qnty{width:50px;border:1px solid;}
.sum{width:10px;border:0;font-weight:bold;}

＆＃13;

<select class="products">
<option value="" select="select">Select Product You Want</option>
<option value="20000">Russian Matryoshka Small (20000 RUB)</option>
<option value="50000">Russian Matryoshka Medium (50000 RUB)</option>
<option value="100000">Russian Matryoshka Large (100000 RUB)</option>
</select> × <input type="text" placeholder="Qnty" class="qnty" /> = <input type="text" class="sum" id="sum" value="0" /> RUB.

＆＃13;

我将产品价格放在哪里？

默认情况下，SELECT表示选择产品。因此，当我选择产品时，下一个选择应该显示完全相同的行。我想自己做..我不知道怎么样...请你帮帮我吧？我尝试了很多，但它没有帮助...

感谢。

Answer 1

＆＃13;

total = function() {
  var sum = 0;
  var optVal = $('#ddlViewBy option:selected').val();
  var optName = $('#ddlViewBy option:selected').text();
  var quantity = $('#qnty').val();
  sum += optVal * quantity;
  
  $('.total').html(sum);
  
  console.log(optName);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="products" id="ddlViewBy">
      <option value="" select="select">Select Product You Want</option>
      <option value="2">Russian Matryoshka Small (2 RUB)</option>
      <option value="5">Russian Matryoshka Medium (5 RUB)</option>
      <option value="10">Russian Matryoshka Large (10 RUB)</option>
    </select>
 ×     <input type="text" placeholder="Qnty" class="qnty" id="qnty" />
 =     <span class="total"></span> RUB.
  
      <button onclick="total()">Total</button>

＆＃13;

作为关于总结您在input

中输入的项目数量的评论的后续答案

total = function() {
  var sum = 0;
  var optVal = $('#ddlViewBy option:selected').val();
  var quantity = $('#qnty').val();
  sum += optVal * quantity;

  $('.total').html(sum);

  console.log(sum);
}

要获取选项名称，您只需说出.text()而不是.val()

var optName = $('#ddlViewBy option:selected').text();

Plnkr示例 - https://plnkr.co/edit/xVubsk08LNfYM8by1shV?p=preview

Answer 2

您需要正确命名（标识）您的小部件以便稍后访问它们。
以下面的代码为例：

＆＃13;

var prod = document.getElementById("product"),
     qty = document.getElementById("qty"),
     sum = document.getElementById("sum");

var calculateSum = function() {
  if (prod.value && qty.value)
    sum.value = prod.value * qty.value;
  else
    sum.value = 0;
}

prod.addEventListener("change", calculateSum);
qty.addEventListener("input", calculateSum);

＆＃13;

input,
select {
  outline: none
}

.products {
  width: 200px;
  border: 1px solid;
}

.qnty {
  width: 50px;
  border: 1px solid;
}

.sum {
  width: 50px;
  border: 0;
  font-weight: bold;
}

＆＃13;

<select id="product" class="products">
<option value="" select="select">Select Product You Want</option>
<option value="20000">Russian Matryoshka Small (20000 RUB)</option>
<option value="50000">Russian Matryoshka Medium (50000 RUB)</option>
<option value="100000">Russian Matryoshka Large (100000 RUB)</option>
</select> × <input type="text" id='qty' placeholder="Qnty" class="qnty" /> = <input type="text" class="sum" id="sum" value="0" /> RUB.

＆＃13;

根据产品（选择），数量（文本输入）更改总和

2 个答案: