当我附加一个新的 select 框时，如何保留 select 框的 selected 选项？

Question

想象一下我selectdog
我会得到一个 select 框，其中 2 是 selected。
之后我selectcat
我会得到第二个 select 框，其中 1 selected
现在我将第一个 select 框从 2 更改为 1
我现在有 2 个 select 个盒子，每个盒子的值为 1

现在我的问题来了：

当我再次选择 dog 时，会创建第三个 select 框，其值为 2，但我想保留 selected 值第一个 select 框。
这意味着我现在想要三个 select 框，其值为 1 1 2 但这里的结果是 2 1 2

（这只是一个示例。更清楚地说，我希望能够添加更多 select 框，但是如果我对 selected 值进行任何更改，那么我想保留它们）

  $(".choose").on("change", function () {
      var number = $(this).find("option:selected").data("number");
      $(".result").append('<select class="list" data-value="' + number + '"><option value="1">1</option><option value="2">2</option></select>');
      $(".list").each(function () {
            var value = $(this).data("value");
            $(this).val(value);
        });
    
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="choose">
  <option selected disabled>Please select</option>
  <option data-number="1">cat</option>
  <option data-number="2">dog</option>
</select>

<div class="result"></div>

Answer 1

更新了更好的代码：

$(".choose").on("change", function() {

  var number = $(this).find("option:selected").data("number");  

  $(".result").append( $('<select class="list" data-value="' + number + '"><option value="1" selected>1</option><option value="2">2</option></select>').val(number) );
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<select class="choose">
  <option selected disabled>Please select</option>
  <option data-number="1">cat</option>
  <option data-number="2">dog</option>
</select>

<div class="result"></div>

Answer 2

你可以试试这个。希望这有效。

$(".choose").on("change", function() {
  var number = $(this).find("option:selected").data("number");
  var value = $(this).val();
  var html = '<select class="list" data-value="' + number + '"><option value="1">1</option><option value="2">2</option></select>';
  var clone = $(html).clone();
  clone.val(number);
  $(".result").append(clone);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="choose">
  <option selected disabled>Please select</option>
  <option data-number="1">cat</option>
  <option data-number="2">dog</option>
</select>

<div class="result"></div>

Answer 3

我想分享一个最终适用于我的代码的解决方案：

$(".choose").on("change", function () {
      var number = $(this).find("option:selected").data("number");
  
        var el = $('<select class="list" data-value="' + number + '"><option value="1">1</option><option value="2">2</option></select>');
      $(".result").append(el);
 
      el.find('.list').val(number);
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="choose">
  <option selected disabled>Please select</option>
  <option data-number="1">cat</option>
  <option data-number="2">dog</option>
</select>

<div class="result"></div>

当我附加一个新的 select 框时，如何保留 select 框的 selected 选项？

How can I keep the selected option of a select box, when I append a new select box?

jquery

select

append

custom-data-attribute