如何讓選擇框動態

我有3 select-box這裏選擇格式，金額 & 航運型。選擇後，它會自動計算價格。如何讓選擇框動態

這裏，那些select-box看看怎麼樣：

<p>Format: <select class="calculate" name="format"> 
    <option value="0">Please Select</option> 
    <option value="0">Format 1</option> 
    <option value="0">Format 2</option> 
    </select></p> 

<p>Amount: <select class="calculate" name="amount"> 
    <option value="0">Select amount</option> 
    <option value="247">250pcs</option> 
    <option value="279">1,000pcs</option> 
    <option value="389">2,500pcs</option> 
    </select></p> 

<p>Shipping type: <select id="surcharge" name="shipping"> 
    <option value="0">Select Shipping</option> 
    <option value="10%">Standard</option> 
    <option value="15%">Express</option> 
    </select></p>

目前

，該金額爲兩個格式（格式1 /格式2）相同。

我想要做的是這樣的：爲格式1，目前金額將保持不變，但如果用戶選擇格式2那麼金額將是這樣的：

 <option value="0">Select amount</option> 
     <option value="300">250pcs</option> 
     <option value="350">1,000pcs</option> 
     <option value="400">2,500pcs</option>

其中value是不同的！我怎麼能實現這個？

這裏去了JSfiddle

在此先感謝您的幫助！

來源

2013-11-26 neshpro9

你應該結帳使用'使用jQuery change'事件，它會讓你開始 – tymeJV

好吧，明白了..我可以看到答案的例子！感謝您的評論:) – neshpro9

您可以通過檢查選項text()做到這一點你選擇

if ($('#sel option:selected').text() === 'Format 2') { 
    $('#amt option').each(function() { 
     alert($(this).text()); 
     if ($(this).text() == "250pcs") $(this).val("300"); 
     else if ($(this).text() == "1,000pcs") $(this).val("350"); 
     else $(this).val("400"); 
    }); 
}

工作fiddle

來源

2013-11-26 14:19:34

好吧，我想我喜歡你的'text（）'方法，因爲我想保留** Format **'0'的**值**。感謝您的回答！ – neshpro9

多數民衆贊成好，那麼你走這個辦法？ –

是啊..但忘記標記爲答案！ – neshpro9

您可以創建一個函數來執行值/選項替換，並根據您的選擇更改進行調用。我爲你做了一個例子，但使用靜態HTML選項來取代舊的，這可能不是最好的方法，但儘量保持它儘可能簡單。

HTML

<p>Format: <select class="calculate format" name="format"> 
    <option value="0">Please Select</option> 
    <option value="1">Format 1</option> 
    <option value="2">Format 2</option> 
    </select></p> 

<p>Amount: <select class="calculate amount" name="menge"> 
    <option value="0">Select Menge</option> 
    <option value="247">250pcs</option> 
    <option value="279">1,000pcs</option> 
    <option value="389">2,500pcs</option> 
    </select></p> 

<p>Shipping type: <select id="surcharge" name="shipping"> 
    <option value="0">Select Shipping</option> 
    <option value="10%">Standard</option> 
    <option value="15%">Express</option> 
    </select></p> 

<p>Price: <span id="total">0 €</span></p>

的Javascript

var updateValues = function(){ 
    if($('.format').val() == 1) { 
     html = '<option value="300">300pcs</option>'; 
     html += '<option value="400">400pcs</option>'; 
     html += '<option value="500">500pcs</option>'; 
     $('.amount').html(html); 
    } else if($('.format').val() == 2) { 
     html = '<option value="600">600pcs</option>'; 
     html += '<option value="900">900pcs</option>'; 
     html += '<option value="1200">1200pcs</option>'; 
     $('.amount').html(html); 
    } 
}; 
$('.format').change(function(){updateValues()}); 
$(".calculate, #surcharge").on("change", function(){ 
     var total = 0; 
     $('.calculate').each(function() { 
      if($(this).val() != 0) { 
       total += parseFloat($(this).val()); 
      } 
     }); 
     if($('#surcharge').val() != 0) { 
      total = total * ((100 + parseFloat($('#surcharge').val()))/100); 
     } 
     $('#total').text(total.toFixed(2) + ' €'); 
    });

小提琴鏈接 http://jsfiddle.net/7Bfk5/23/

來源

2013-11-26 14:18:38 Ahmad

感謝您的幫助和努力！我真的很感激它，但我只需要標記1作爲答案！ – neshpro9

您應該首先在數組中設置新值。所以你可以在改變第一個選擇時循環它們。

然後你就可以很容易地從第二選擇得到的選項，並用正確的新值更新它們：

$(".calculate, #surcharge").on("change", function(){ 
    if($(this).val() == 1) 
    { 
     var amountValues = new Array(0,250,400,500); 

     $("#menge option").each(function(key,value) 
     { 
      $(this).val(amountValues[key]); 
      }); 
    } else if($(this).val() == 2) 
    { 
     var amount Values = new Array(); 
     // ..... 
    } 
});

http://jsfiddle.net/7Bfk5/15/

來源

2013-11-26 14:20:18

感謝您的回答！試一試後我會回來！ – neshpro9

如何讓選擇框動態

回答

相關問題