Question

<select name="" id="lensoptions">
  <optgroup label="SV Signature">
    <option value="100,80">Transitions</option>
    <option value="140,75">Anti-Glare</option>
    <option value="100,75">Polarized</option>
    <option value="84,42">Trivex</option>
    <option value="30,15">Scratch Coat</option>
  </optgroup>
</select>
<input type="text" id="beforeinsurance1">
<input type="text" id="afterinsurance1">
<br>
<input type="text" id="totalbefore">
<input type="text" id="totalafter">

强文`我有一份我正在创建的工作的保险表格，在下拉列表的每个选项上，我必须有2个值，一个在保险之前，一个在保险之后。我将在左侧有大约8个选择框，对于每个选择，我将在右侧有2个输入框。我想知道是否有一种方法可以使用jquery从select选项中获取两个值，并将它们放入选择列表旁边的输入框中。然后将底部的一列方框总计显示保险前的客户总数和保险后的总额。一个例子是眼镜，保险前30美元和保险后15.00美元。因此，当我选择选项时，输入框会自动填写正确的定价和底部的总数。谢谢你的帮助！！！我一直在寻找！希望在其中使用jquery。： - ）

Answer 1

＆＃13;

var price = function(e){
    // get prices from option value and split into before and after
    var prices = $(e.data.id).val().split(","),
        before = prices[0],
        after = prices[1]
    
    // set the prices in their respective places      
    $("#beforeinsurance" + e.data.sel).val(before)
    $("#afterinsurance" + e.data.sel).val(after)
    
    // call the total function on every change as well
    total()
}

var total = function(){
    // get the selected prices from their respective inputs
    var before1 = parseInt($("#beforeinsurance1").val(), 10),
        before2 = parseInt($("#beforeinsurance2").val(), 10),
        after1 = parseInt($("#afterinsurance1").val(), 10),
        after2 = parseInt($("#afterinsurance2").val(), 10),
        // calculate the totals
        before = before1 + before2,
        after = after1 + after2

    // check to make sure it's a real number before place in the total boxes
    // if this wasn't here, when only one is selected, it will display "NaN"
    if (!isNaN(before)) $("#totalbefore").val(before)
    if (!isNaN(after)) $("#totalafter").val(after)
}

// register event handlers on the change of your selects
// also passes in arguments to scope the 'price' function to the correct select and inputs
$("#lensoptions").on("change", {id: "#lensoptions", sel: 1}, price)
$("#frameoptions").on("change", {id: "#frameoptions", sel: 2}, price)

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="" id="lensoptions">
  <optgroup label="SV Signature">
    <option value="100,80">Transitions</option>
    <option value="140,75">Anti-Glare</option>
    <option value="100,75">Polarized</option>
    <option value="84,42">Trivex</option>
    <option value="30,15">Scratch Coat</option>
  </optgroup>
</select>
<div>
  Lenses Before Insurance - <input type="text" id="beforeinsurance1">
</div>
<div>
  Lenses After Insurance - <input type="text" id="afterinsurance1">
</div>
<hr>
<select name="" id="frameoptions">
  <optgroup label="SV Signature">
    <option value="120,75">Plastic</option>
    <option value="160,100">Metal</option>
    <option value="60,45">Wood</option>
    <option value="1000,100">Something Else</option>
  </optgroup>
</select>
<div>
  Frames Before Insurance - <input type="text" id="beforeinsurance2">
</div>
<div>
  Frames After Insurance - <input type="text" id="afterinsurance2">
</div>
<hr>
<div>
  Total Before Insurance - <input type="text" id="totalbefore">
</div>
<div>
  Total After Insurance - <input type="text" id="totalafter">
</div>

＆＃13;

我猜测你的描述和身份证的名称，你会有多个下拉菜单，并希望计算总数，所以我补充说。如果你有任何问题，请告诉我。< / p>

选择中的多个值并将其添加

1 个答案: