javascript - 增加类型编号后动态添加下拉菜单

Question

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

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

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

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

每次输入数字发生变化时，使用此 JS 代码都会添加下拉菜单:

$(document).ready(function(){
  var prevCount = 0;

  $(".suborgamount").bind('keyup mouseup', function () {
    var total_element = $('input[name=suborgamount]').val();
    if (prevCount != total_element){
        addRemoveDropdownList();    
    }
  });


  function addRemoveDropdownList() {
    var total_element = $('input[name=suborgamount]').val();
    prevCount = total_element;
    var selectPickers = $(".suborgdropdownholder > select");
    var container = $("<p class='col-md-4'>Selecteer deelorganisatie(s) waarvoor het lidmaatschap ook geactiveerd moet worden:</p>");
    $('.suborgdropdownholder').html(container);
    $(".selectpicker").not(':first').remove();
    var nextIndex = 0;
    for (var i = 0; i < total_element; i++){
      var newselect = $('#orgdropdown').clone().attr({
        style:'display: block !important',
        id:'suborgdropdown_'+nextIndex
      });
      if (selectPickers[nextIndex]){
          newselect.find('option[value='+ $(selectPickers[nextIndex]).val() +']').prop('selected', true);
      }
      $('.suborgdropdownholder').append(newselect);
      nextIndex++;
    }
  }
});