jQuery的/ JS - 更新下拉

我有了這個設置上的jsfiddle：http://jsfiddle.net/melissal/FmEcw/jQuery的/ JS - 更新下拉

現在，當我改變「數量」下拉菜單的選擇，它改變了紙（上圖）的價格。我希望這在第二個下拉菜單中顯示。所以當你選擇'紙'下拉菜單時，你會看到'Regular'和'Premium（+ $ XXX）'兩個選項，但我無法弄清楚如何讓新價格出現。那可能嗎？

這裏的HTML：

Paper: $<span id="paper_div"></span><br /> 

<div id="product-options"> 
<form action="/cart/add" id="ProjectProductForm" method="post" accept-charset="utf-8"> 
    <div style="display:none;"> 
     <input type="hidden" name="_method" value="POST"/> 
    </div>   
    <div id="product-options-qty"> 
     <span class="text">Quantity: </span> 
     <span class="form"> 
      <div class="input select"> 
       <select name="field_6" class="text_select" id="field_6"> 
        <option value="225">15 @ $225.00</option> 
        <option value="240">20 @ $240.00</option> 
        <option value="250">30 @ $250.00</option> 
        <option value="270">40 @ $270.00</option> 
       </select> 
      </div> 
     </span> 
    </div> 
    <div id="product-options-paper"> 
     <span class="text">Paper: </span> 
     <span class="form"> 
      <div class="input select"> 
       <select name="field_6" class="text_select"> 
        <option value="1">Regular</option> 
        <option value="2">Premium (+ $<span id="paper_div"></span>)</option> 
       </select> 
      </div> 
     </span> 
    </div> 

</form>

而且JS：

$(document).ready(function() { 
$("#field_6").change(function() { 
    var id = $(this).val(); 
    $('#price_div').html($(this).val()); 

    var premium_paper = id * .25; 
    var premium_paper = parseFloat(Math.round(premium_paper * 100)/100).toFixed(2); 
    $('#paper_div').html(premium_paper);   
}).change();  
});

來源

2014-06-10 Melissa L

所以，如果我選擇30作爲數量，保費在第二個下拉應改爲「高級（+ 62.50 $）？側面說明，標識** **必須是唯一的。 – j08691

是的，這是完全正確的。（我想我已經刪除了唯一的重複ID？以前沒有看到它。謝謝:)） –

所以像這樣http://jsfiddle.net/j08691/rv3Nd/？請注意，我在第二個下拉列表中添加了一個ID，以便更容易地選擇它。此外，您的下拉列表具有相同的名稱屬性，您可能不想要。 – j08691

嘗試使用$('#field_7 option:eq(1)').html('Premium (+ $'+premium_paper+')')：

注意，我添加了一個ID爲第二選擇。您可能還想爲您的下拉列表指定不同的名稱屬性。

$(document).ready(function() { 
    $("#field_6").change(function() { 
     var id = $(this).val(); 
     $('#price_div').html($(this).val()); 
     var premium_paper = id * .25; 
     var premium_paper = parseFloat(Math.round(premium_paper * 100)/100).toFixed(2); 
     $('#paper_div').html(premium_paper); 
     $('#field_7 option:eq(1)').html('Premium (+ $'+premium_paper+')') 
    }).change(); 
});

jsFiddle example

來源

2014-06-10 15:22:30 j08691

jQuery的/ JS - 更新下拉

回答

相關問題