时间戳

首页 > 解决方案 > 如何在 jQuery 中为动态下拉按钮设置默认选项？

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

问题描述

我有一个 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>

标签： javascriptjqueryhtml

解决方案

问题出在克隆上，试试这个，你得到的是 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>

推荐阅读