显示更多的选择取决于jQuery/JS中的另一个选择

Question

<div class="deals_options"> 
    Choose: 
    <?php 
    echo '<select name="chosen_options[]">'; 
    foreach($deals_options as $option) 
    { 
    echo ' 
    <option value="'.$option['value'].'">'.$option['displaytext'].'</option> 
    '; 
    } 
    echo '</select>'; 
    ?> 
</div> 

这是我现在拥有的。这将输出一个选择，显示此交易提供的选项，您可以选择。

现在提供优惠，您还可以选择您想要的优惠数量。我想这样做，它显示了您选择交易提供的尽可能多的选择器。

例如，如果您在多少交易报价中选择3，那么它应该显示3个您可以选择的选择器。

这里有一个例子：

http://jsfiddle.net/LWayp/

这不是工作，所以当你选择一个量没有任何反应，但你可以看到HTML /输出是我多么希望它的工作。当你选择3时，它显示3个选择器。

Answer 1

编辑：请参见下面的代码的情况下，如果你想添加/从DOM删除，DEMO

$('.deals_amount').change(function() { 
    var amount = $(this).val(); 
    var selectCount = $('.deals_options select').length; 
    if (amount < selectCount) { //remove 
     $('.deals_options select:gt(' + (amount - 1) + ')').remove(); 
    } else { 
     var $orig = $('.deals_options select:first'); 
     for (var i = 0; i < Math.abs(amount - selectCount); i++) { 
      $orig.clone().insertAfter('.deals_options select:last'); 
     } 
    } 
}).change(); //<-- Triggered on load to populate with what it was set 

或者您可以显示/隐藏基于deals_amount选择，

DEMO

$('.deals_options select').each(function() { 
     if ($(this).index() < amount) { 
      $(this).show(); 
     } else { 
      $(this).hide(); 
     } 
    }); 

Answer 2

你的意思是吗？

http://jsfiddle.net/LWayp/7/

Answer 3

这应该工作

$(function(){ 

    $(".deals_options select").hide();  
    $('.deals_amount').change(function() {   
     $(".deals_options select").hide(); 

     var amount = $(this).val(); 

     var counter=0; 
     $(".deals_options select").each(function(){ 
      if(counter<amount) 
      {       
      $(this).show(); 
      counter++    
      } 
      else 
      { 
      // We dont want .each loop to run any more. So lets return ! 
      return false;    
      } 
     }); 
    }); 
}) 

工作样本：http://jsfiddle.net/LWayp/11/