选择选项时添加新的下拉列表jquery

时间:2012-09-04 16:15:31

标签: jquery html select dynamic drop-down-menu

似乎没有多少人知道这个问题的答案:我对它的改写很少,以便更容易理解我想要得到的东西。请帮帮我。

 <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);
        }
    });
});

它适用于第一次选择,因此当选择原始campaign_1选择时添加新下拉列表,并禁用第一个,当第二个选择时没有任何反应。请帮忙。下拉框必须相同,我不想修改他们的ID。因为它是通过PHP生成的。

1 个答案:

答案 0 :(得分:1)

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