Set multiple selects value in order of operation

I have been having some trouble with assigning a number of select's value with a specific order of operation.

I have nth amount of input fields (but using 3 for testing), and nth amount of select elements (using 10 for testing)

My data set from the input fields translate into:

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

What I would like is for each key value pair, it triggers that number of select to be selected, but in sequence of the total number of keys

Expected Output

What I am getting

Any help would be greatly appreciated

Current Code below

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>

i have adapted your code:

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>

Set multiple selects value in order of operation

1 Answers