时间戳

首页 > 解决方案 > 增加类型号后动态添加下拉列表

javascript - 增加类型号后动态添加下拉列表

问题描述

我正在尝试根据在类型为编号的输入字段中选择的数字添加和删除下拉列表。

增加数字后，我想添加以前创建的下拉列表的另一个克隆。递减后，我希望再次删除最后一个。让其他人保持各自的价值观。

到目前为止，我的代码一直在添加下拉列表，但它的完成方式并不是很好的编码。我不知道如何动态删除最后一个元素。

html:

<div class="row step2">
    <h3>Aantal deelorganisaties inclusief hoofdorganisatie</h3>
    <p>Kies het aantal deelorganisaties voor wie je het samengestelde lidmaatschap ook wil activeren</p>
    <div>
        <input type="number" name="suborgamount" class="suborgamount" min="0" value="0"/> 
        <i class="fa fa-times suborgpriceperyear">
    </div>
    <div class="headorgdropdownholder col-md-12">
        <p class="col-md-5">Selecteer je eigen organisatie voor het lidmaatschap te activeren:</p>
        <div class="col-sm-12 col-md-4 space filter-fields" style="padding-right: 0">
            <select class="selectpicker" id="orgdropdown" data-live-search="true">
                <?php 
                    foreach ($allorgs as $org) {
                        echo "<option data-tokens=\"$org->name\">orgid: $org->org_id - naam: $org->name</option>";
                    }
                ?>
            </select>
        </div>
    </div>
    <div class="suborgdropdownholder col-md-12">

    </div>
</div>

查询：

$(".suborgamount").bind('keyup mouseup', function () {
    addRemoveDropdownList();
});


function addRemoveDropdownList() {
    var container = $("<p class='col-md-4'>Selecteer deelorganisatie(s) waarvoor het lidmaatschap ook geactiveerd moet worden:</p>");
    $('.suborgdropdownholder').html(container);

    // Finding total number of elements added
    var total_element = $('input[name=suborgamount]').val();

    // last <div> with element class id
    var lastid = $(".selectpicker:last").attr("id");
    var split_id = lastid.split("_");
    var nextindex = Number(split_id[1]) + 1;
    if (isNaN(nextindex)) {
        nextindex = 1;
    }

    var newselect = $('#orgdropdown').clone().attr({
        style:'display: block !important',
        id:'suborgdropdown_'+nextindex
    });

    $(".selectpicker:last").after(newselect);
}

JSFiddle 显示问题jsfiddle

标签： javascriptjquery

解决方案

我可以看到您的代码无法按预期工作的多种原因：

  • 您应该使用change事件而不是keyup mouseup事件，以便聚焦输入不会增加下拉菜单的数量
  • 输入未反映下拉列表的数量。当用户在初始加载后输入 8（输入为 0）时，您将得到 2 个下拉菜单。您可能需要重新考虑这种行为，因为它可能会让用户感到困惑。

对于我的其余答案，我将假设您希望拥有与输入中显示的相同数量的下拉列表。为此，您可以：

  • 用 1 而不是 0 初始化输入
  • 当输入值改变时（change事件）：
    • 最后检索您想要的下拉列表数（从输入中）
    • 计算您拥有的下拉列表的数量：$('.selectpicker').length
    • 如果总数低于所需数字，则迭代从现有数字到所需数字的索引，克隆最后一个下拉列表$('selectpicker:last')，使用索引作为克隆的 id，并将克隆附加到容器
    • 如果总数高于所需数字，则从现有数字开始迭代索引到所需数字，并从容器中删除最后一个下拉列表。

推荐阅读