JQuery的 - 嘗試一下改變從一個輸入到另一個輸入

我有一個輸入這值是一堆選擇選項的總和。從那裏，我設置了另一個輸入，它查看來自第一個輸入的值，並假設在第一個輸入發生更改時進行更新（計劃使用它做更多，但無法通過此步驟）。不幸的是，第二個沒有更新。JQuery的 - 嘗試一下改變從一個輸入到另一個輸入

樣本HTML：

<select name="product-attr-os"> 
    <option data-selected="house" value="10">Made in House</option> 
    <option data-selected="license" value=" 
      15">Licensed Software</option> 
    <option data-selected="open" value="20">Open Source</option> 
</select> 
<br> 
<select name="product-attr-network"> 
    <option data-selected="3g" value="40">3G</option> 
    <option data-selected="4g" value=" 
       45">4G/LTE</option> 
    <option data-selected="5g" value="50">5G</option> 
</select> 
<p>Attr Total Cost</p> 
<input type="text" class="product-attr-totalCost" name="product-attr-totalCost" readonly /> 
<p>Standard Cost</p> 
<input type="text" class="product-standardCost" name="product-standardCost" readonly />

JQuery的：

// SUM (Product Attributes) 
var productAttrTotal = function (inputs, output, selected) { 
    $(document).ready(function() { 
     $(inputs).bind('change', function() { 

      var sum = 0; 
      $(inputs).find(selected).each(function() { 
       sum += parseInt($(this).val()); 
      }); 

      $(output).val(sum); 

     }); 
     $(inputs).trigger('change'); 
    }); 
}; 

productAttrTotal('select', '.product-attr-totalCost', ':selected'); 


// Product Attributes Total + Wifi 
var productTotalCost = function (attrCost, totalCost) { 
    $(document).ready(function() { 
     $(attrCost).bind('change', function() { 
      $(totalCost).val($(attrCost).val()); 
     }); 
     $(attrCost).trigger('change'); 
    }); 
}; 

productTotalCost('.product-attr-totalCost', '.product-standardCost');

Jsfiddle

來源

2014-01-13 dvoutt

你想在這兩個領域相同的價格 –

是的，我現在做的。我將添加一些東西到第二個函數「productTotalCost」，這會增加價格，但我需要確保它至少符合這個要求。 – dvoutt

如果你想顯示在輸入字段相同的值，通過選擇對他們倆的作爲輸出使用多個選擇器

productAttrTotal('select', '.product-attr-totalCost, .product-standardCost', ':selected');

演示：Fiddle

還要注意觸發頁面加載的變化事件只選擇元素

$(inputs).first().trigger('change');

之一在這種情況下

productAttrTotal('select', '.product-attr-totalCost', ':selected');

那麼一旦更新的值是使用腳本觸發更改事件

0改變

$(inputs).first().trigger('change');

演示：Fiddle

來源

2014-01-13 00:44:46

對不起，有一些我不清楚。我想要第二個輸入採取第一個的值。接下來，我將向第二個函數添加額外的代碼，這將允許我通過額外的值增加它。我的第一個目標是確保他們模仿。 – dvoutt

@dvoutt查看更新 –

太棒了！這樣可行。 – dvoutt

JQuery的 - 嘗試一下改變從一個輸入到另一個輸入

回答

相關問題