顯示更多的選擇取決於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/