按操作顺序设置多项选择值答案

【问题标题】：Set multiple selects value in order of operation按操作顺序设置多项选择值
【发布时间】：2021-02-19 17:10:43
【问题描述】：

我在使用特定的操作顺序分配多个 select 的值时遇到了一些麻烦。

我有第 n 个输入字段（但使用 3 个进行测试）和第 n 个选择元素（使用 10 个进行测试）

我的输入字段中的数据集转换为：

obj = {'John Doe': 2, 'Jane Doe': 3, 'Richard Doe': 5}

我想要的是对于每个键值对，它会触发选择的选择数量，但按键的总数排序

Expected Output

What I am getting

任何帮助将不胜感激

当前代码如下

var list = {
  'John Doe': 2,
  'Jane Doe': 3,
  'Richard Doe': 5
}
var listlength = Object.keys(list).length
var count = 0;

$.each(list, function(key, value) {
  var setindex = count;
  for (var i = 0; i < value; i++) {
    $('.list').eq(setindex).val(key).trigger('change');
    setindex += listlength;
  }
  count++;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-md-6 mx-auto">
      <select class="form-control list" name="">
        <option value="" selected>Select</option>
        <option value="John Doe">John Doe</option>
        <option value="Jane Doe">Jane Doe</option>
        <option value="Richard Doe">Richard Doe</option>
      </select>
      <select class="form-control list" name="">
        <option value="" selected>Select</option>
        <option value="John Doe">John Doe</option>
        <option value="Jane Doe">Jane Doe</option>
        <option value="Richard Doe">Richard Doe</option>
      </select>
      <select class="form-control list" name="">
        <option value="" selected>Select</option>
        <option value="John Doe">John Doe</option>
        <option value="Jane Doe">Jane Doe</option>
        <option value="Richard Doe">Richard Doe</option>
      </select>
      <select class="form-control list" name="">
        <option value="" selected>Select</option>
        <option value="John Doe">John Doe</option>
        <option value="Jane Doe">Jane Doe</option>
        <option value="Richard Doe">Richard Doe</option>
      </select>
      <select class="form-control list" name="">
        <option value="" selected>Select</option>
        <option value="John Doe">John Doe</option>
        <option value="Jane Doe">Jane Doe</option>
        <option value="Richard Doe">Richard Doe</option>
      </select>
      <select class="form-control list" name="">
        <option value="" selected>Select</option>
        <option value="John Doe">John Doe</option>
        <option value="Jane Doe">Jane Doe</option>
        <option value="Richard Doe">Richard Doe</option>
      </select>
      <select class="form-control list" name="">
        <option value="" selected>Select</option>
        <option value="John Doe">John Doe</option>
        <option value="Jane Doe">Jane Doe</option>
        <option value="Richard Doe">Richard Doe</option>
      </select>
      <select class="form-control list" name="">
        <option value="" selected>Select</option>
        <option value="John Doe">John Doe</option>
        <option value="Jane Doe">Jane Doe</option>
        <option value="Richard Doe">Richard Doe</option>
      </select>
      <select class="form-control list" name="">
        <option value="" selected>Select</option>
        <option value="John Doe">John Doe</option>
        <option value="Jane Doe">Jane Doe</option>
        <option value="Richard Doe">Richard Doe</option>
      </select>
      <select class="form-control list" name="">
        <option value="" selected>Select</option>
        <option value="John Doe">John Doe</option>
        <option value="Jane Doe">Jane Doe</option>
        <option value="Richard Doe">Richard Doe</option>
      </select>
    </div>
  </div>
</div>

【问题讨论】：

标签： javascript html jquery json

【解决方案1】：

我已经修改了你的代码：

var list = {
  'John Doe': 2,
  'Jane Doe': 3,
  'Richard Doe': 5
}

//var count = list => Object.values(list).reduce((a, b) => a + b);
var count = Object.values(list).reduce((a, b) => a + b);//sum of values
var i = 0;
while(i < count){
  $.each(list, function(key, value) {
   if(value > 0){
      $('.list').eq(i).val(key).trigger('change');
      list[key]--;
      i++;
   }
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-md-6 mx-auto">
      <select class="form-control list" name="">
        <option value="" selected>Select</option>
        <option value="John Doe">John Doe</option>
        <option value="Jane Doe">Jane Doe</option>
        <option value="Richard Doe">Richard Doe</option>
      </select>
      <select class="form-control list" name="">
        <option value="" selected>Select</option>
        <option value="John Doe">John Doe</option>
        <option value="Jane Doe">Jane Doe</option>
        <option value="Richard Doe">Richard Doe</option>
      </select>
      <select class="form-control list" name="">
        <option value="" selected>Select</option>
        <option value="John Doe">John Doe</option>
        <option value="Jane Doe">Jane Doe</option>
        <option value="Richard Doe">Richard Doe</option>
      </select>
      <select class="form-control list" name="">
        <option value="" selected>Select</option>
        <option value="John Doe">John Doe</option>
        <option value="Jane Doe">Jane Doe</option>
        <option value="Richard Doe">Richard Doe</option>
      </select>
      <select class="form-control list" name="">
        <option value="" selected>Select</option>
        <option value="John Doe">John Doe</option>
        <option value="Jane Doe">Jane Doe</option>
        <option value="Richard Doe">Richard Doe</option>
      </select>
      <select class="form-control list" name="">
        <option value="" selected>Select</option>
        <option value="John Doe">John Doe</option>
        <option value="Jane Doe">Jane Doe</option>
        <option value="Richard Doe">Richard Doe</option>
      </select>
      <select class="form-control list" name="">
        <option value="" selected>Select</option>
        <option value="John Doe">John Doe</option>
        <option value="Jane Doe">Jane Doe</option>
        <option value="Richard Doe">Richard Doe</option>
      </select>
      <select class="form-control list" name="">
        <option value="" selected>Select</option>
        <option value="John Doe">John Doe</option>
        <option value="Jane Doe">Jane Doe</option>
        <option value="Richard Doe">Richard Doe</option>
      </select>
      <select class="form-control list" name="">
        <option value="" selected>Select</option>
        <option value="John Doe">John Doe</option>
        <option value="Jane Doe">Jane Doe</option>
        <option value="Richard Doe">Richard Doe</option>
      </select>
      <select class="form-control list" name="">
        <option value="" selected>Select</option>
        <option value="John Doe">John Doe</option>
        <option value="Jane Doe">Jane Doe</option>
        <option value="Richard Doe">Richard Doe</option>
      </select>
    </div>
  </div>
</div>

【讨论】：