Question

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

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

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

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>

Jquery的：

$(".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

Answer 1

我可以看到为什么您的代码没有按预期工作的多种原因：

您应该使用change个事件而不是keyup mouseup个事件，以便集中输入不会增加下拉数量
输入未反映下拉数。当用户在初始加载（输入为0）后输入8时，最终会有2个下拉菜单。您可能想重新考虑这种行为，因为它可能会让用户感到困惑。

对于我的其余部分，我将假设您希望输入中显示的下拉数相同。为此，您可以：

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

Answer 2

每次输入数字更改时，使用此JS代码都会添加下拉列表：

private void setProgressValue(final int progress) {

    // set the progress
    simpleProgressBar.setProgress(progress);

    // thread is used to change the progress value
    Thread thread = new Thread(new Runnable() {
        @Override
        public void run() {
            try {
                Thread.sleep(1000);

                if(simpleProgressBar.getProgress() == simpleProgressBar.getMax()) {
                    runOnUiThread(new Runnable() {
                        @Override
                        public void run() {
                            startB.setVisibility(View.VISIBLE);
                        }
                    });
                }
            } catch (InterruptedException e) {
                e.printStackTrace();
            }
            setProgressValue(progress + 10);
        }
    });
    thread.start();
}

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

2 个答案: