如何让选择框动态

我有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

如何让选择框动态

回答

相关问题