Question

我有一个HTML和jQuery代码。当我点击添加更多按钮时，我需要在页面上添加一个下拉按钮，并应使用包含其位置值的选项进行选择。

例如：如果只有一个下拉菜单，则选择的选项是1。单击添加更多按钮后，应选择新创建的下拉菜单选项2。下一个下拉菜单应选择选项3，依此类推。

但是在我的代码中，当我创建更多按钮时，只有最后一个按钮将具有其位置值，所有其他下拉菜单都将重置为“ 1” 。我该怎么解决？

$(".add_more").on("click", function() {

    var order = $(".item_order:last").find("option:last").text();
    var nextItem = parseInt(order) + 1;

    $(".main").last().after($(".main").clone().html());
    
    $(".item_order").append("<option>" + nextItem + "</option>");
    
    $(".item_order:last option:contains(" + nextItem + ")").prop("selected",true);

});

.main {
  float : left;
}

.item_order {
  width : 45px;
  margin-right : 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
  <select class="item_order">
    <option>1</option>
  </select>
</div>

<button class="add_more">+Add More</button>

Answer 1

问题出在克隆上，尝试这样做是在获取HTML内容而不是select语句，同时您还在main而不是main内部之后添加了newselect选项，因此每次选择它都会在所有元素中进行选择。

$(".main").append($(".main .item_order:last").clone());

$(".add_more").on("click", function() {   
    var order = $(".item_order:last").find("option:last").text();
    var nextItem = parseInt(order) + 1;

    $(".main").append($(".main .item_order:last").clone());
    
    $(".item_order").append("<option>" + nextItem + "</option>");
    
    $(".item_order:last option:contains(" + nextItem + ")").prop("selected",true);

});

.main {
  float : left;
}

.item_order {
  width : 45px;
  margin-right : 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
  <select class="item_order">
    <option>1</option>
  </select>
</div>

<button class="add_more">+Add More</button>

Answer 2

这是您执行此操作的一种更简单的方法...除非我误解了您的要求。

$(".add_more").on("click", function() {
    let nextItem = $('.main').children().length + 1;

    let newDropdown = $('<select>').addClass('item_order');

    newDropdown.append($(`<option>${nextItem}</option>`));

    $('.main').append(newDropdown)

    $(".item_order:last option:contains(" + nextItem + ")").prop("selected",true);
});

如何在jQuery中为动态下拉按钮设置默认选项？

2 个答案: