时间戳

首页 > 解决方案 > 按操作顺序设置多项选择值

javascript - 按操作顺序设置多项选择值

问题描述

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

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

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

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

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

预期产出

我得到了什么

任何帮助将不胜感激

当前代码如下

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>

标签： javascripthtmljqueryjson

解决方案

我已经修改了你的代码：

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>

推荐阅读