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

这应该有效

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

Answer 2

修改：如果您要在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 3

你的意思是什么？

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

根据jQuery / JS中的另一个选择显示更多选择

3 个答案: