как сделать выбор коробки динамического

Question

Я три select-box здесь, чтобы выбрать формат , Сумма & типа Shipping. После выбора он автоматически рассчитает цену.

здесь, как те 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/Format 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

Заранее спасибо за любую помощь!

Answer 1

Вы можете сделать это, проверяя 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

Answer 2

Вы можете создать функцию, которая заменяет значения/опции и вызывать ее при выбранных изменениях. Я сделал для вас пример, но использовал статические параметры 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) + ' €'); 
    }); 

Fiddle ссылка http://jsfiddle.net/7Bfk5/23/

Answer 3

Вы должны сначала установить новые значения в массиве. Таким образом, вы можете прокручивать их, изменяя первый выбор.

Тогда вы можете легко получить параметры из второго выбора, и обновлять их с правильными новыми значениями:

$(".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/