下拉菜单显示总数;需要它来显示所选项目

时间:2017-10-12 22:03:08

标签: javascript jquery html

我有一个脚本,显示下拉菜单中每个选项的总价格。现在我需要显示所选菜单的名称和总数。

您将在下面找到显示总价的脚本。我需要它来显示name中的<option>

知道如何修改它以显示所选每个下拉列表的名称吗?

//<![CDATA[
$(function() {
  $("#type").on("change", function() {
    $("select.calculate option").eq(0).prop('selected', true);
    calc();
  });
  $("select.calculate").on("change", calc);
  $("input[type=checkbox].calculate").on("click", calc);
  function calc() {
    var basePrice = 0;
    newPrice = basePrice;
    $("select.calculate option:selected,input[type=checkbox].calculate:checked").each(function(idx, el) {
      newPrice += parseInt($(el).data('price'), 10);
    });
    newPrice = newPrice.toFixed(2);
    $("#item-price").html(newPrice);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="type" name="buyer" class="form-control input-lg form-el">
  <option value="">Service Needed</option>
  <option value="kite">Car Wash & Detailing</option>
    <option value="user">Mechanic visit</option>
  <option value="elect">Electrican visit</option>
  <option value="tyre">Tyre Service</option>
  <option value="bat">Battery Service</option>
</select>
<div style='display:none; ' id='business'>
  <select id="type2" name="buyername" class="form-control input-lg form-el calculate">
    <option data-price="0" value="">-- Select --</option>
    <option data-price="100" value="kite1">Car Wash exterior</option>
    <option data-price="150" value="kite1">Car Wash In & Out</option>
    <option data-price="1000" value="kite2">Full Detailing</option>
  </select>
</div>
<div style='display:none; ' id='tyrem'>
  <select id="type2" name="tyrem" class="form-control input-lg form-el calculate">
    <option data-price="0" value="">-- Select --</option>
    <option data-price="100" value="kite1">Road tyre problem rescue</option>
    <option data-price="50" value="kite1">4 Tyre pressure check and adjust</option>
    <option data-price="100" value="kite2">tyre 1 plug repair</option>
    </select>
</div>
<div style='display:none; ' id='batm'>
  <select id="type2" name="batm" class="form-control input-lg form-el calculate">
    <option data-price="0" value="">-- Select --</option>
    <option data-price="100" value="kite1">Battery rescue / jump start</option>
    <option data-price="150" value="kite2">Battery check , jump start or replace - price depends on battery</option>
  </select>
  <span id="item-price">0</span>
</div>

0 个答案:

没有答案