Question

想象一下，我选择了dog
我会看到一个选中2的选择框。
在此之后，我选择cat
我会在第二个选择框中选择1
现在，我将第一个选择框从2更改为1
我现在有2个选择框，每个框的值为1

现在出现了我的问题：

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

（这只是一个例子。为了更清楚，我希望能够添加更多选择框，但如果我对所选值进行任何更改，那么我想保留它们）

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

当我添加新的选择框时，如何保留选择框的选定选项？

3 个答案: