选项选择添加新下拉列表jQuery

Question

似乎没有多少人知道这个问题的答案：我稍微改写了一下，以便更容易理解我想要得到什么。请帮帮我。

 <select id="1">
  <option val="1"></option>
  <option val="2"></option>
 </select>

选择具有值= 2的选项时，我希望新下拉框出现，如：

 <select id="2">
  <option val="1"></option>
  <option val="2"></option>
 </select>

正如您所见，id 2 具有相同的选项，但每次用户选择不同的选项时，我只想要一个新的下拉框。我的 jquery 和 html 代码如下：

HTML：

<div id="campaigns">
    <div id="campaign_1">
        <label for="ddcampaign" style="margin-right: 10px;">Campaign:</label>     
        <?=showCampaignDropdown('campaign', false, false, true, false, 'All Campaigns')?>
    </div>
</div>

showCampaignDropdown 所做的只是创建一个带有一堆选项的选择。

我的 Jquery 看起来像这样：

 $(function() {
    campaigncount = 1;
    $(document).on('change', '#campaign_' + campaigncount + ' select',  function() {
        var firstcampaign = parseInt($('#campaign_'+campaigncount+' select option:selected').val());
        //alert(campaigncount);
        campaigncount++;    
        //if value is > 0 add more campaigns to search
        if (firstcampaign > 0) {
            $(this).attr('disabled', true);
            $('#campaigns').append('<div id="campaign_'+campaigncount+'"><?=showCampaignDropdown('campaign', false, false, true, false, 'All Campaigns')?></div>');
        } else {
            $('#campaign_' + (campaigncount-1) + ' select').attr('disabled', false);
        }
    });
});

it works on first select, so when original campaign_1 select is selected adds new drop down, and disables the first, when second selected nothing happens.请帮忙。下拉框必须相同，我不想修改他们的 ID。因为它是通过 PHP 生成的。

Answer 1

您仅将更改事件附加到#campaign_1 div。你应该做这个： on('change', '#campaigns select' ... 现在位于活动 div 中的所有选择都将运行该处理程序。