CODEWITHSUNDEEP
javascriptjquery
raptorandy
raptorandy

Reputation: 225

Using a string array and a nested loop to select options from dropdown if option contains substring

I have a certain number of selects (I used three in this example). Each select has the same options, which are : "some number" - "name".

I have an array with names only that indicates which options belong in each select. The array elements and the number of select elements are always the same. The order will always be the same, this means, the first name of the array should be selected in the first select (the select with id ending in "_1").

So in the example, three names in the array and three select elements. Mark should be selected in select_1, Susan in select_2 and John in select_3.

Since the names in the array don't match exactly (they don't have: "some number" - ), I try to check if the options in each select contains the name using a nested lop. However in the result, all the selects have the third name John as selected.

Why is this happening? Thanks in advance.

$(document).ready(function() {
  //Array with names
  var names = ["Mark", "Susan", "John"];
  var arrayLength = names.length;
  /* OLD CODE
  for(i = 0; i < 3; i++){
    for(j = 0; j < arrayLength; j++){
      $("#select_" + (i+1) + " option:contains(" + names[j] + ")").prop("selected", true);
    }
  }
  */
  
  //SOLUTION
  for(j = 0; j < arrayLength; j++){
        $("#select_" + (j+1) + " option:contains(" + names[j] + ")").prop("selected", true);
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name="select_1" id="select_1">
  <option value="0">Select</option>
  <option value="1">456 - Susan</option>
  <option value="2">335 - John</option>
  <option value="3">887 - Mark</option>
  <option value="4">182 - Amy</option>
</select>
<select name="select_2" id="select_2">
  <option value="0">Select</option>
  <option value="1">456 - Susan</option>
  <option value="2">335 - John</option>
  <option value="3">887 - Mark</option>
  <option value="4">182 - Amy</option>
</select>
<select name="select_3" id="select_3">
  <option value="0">Select</option>
  <option value="1">456 - Susan</option>
  <option value="2">335 - John</option>
  <option value="3">887 - Mark</option>
  <option value="4">182 - Amy</option>
</select>

Upvotes: 1

Views: 665

Answers (2)

tomgb23
tomgb23

Reputation: 11

You need to increment 'i' in the inner for-loop in order to move to the next drop-down box, if you really want to use two for-loops. Your code was iterating to j < 3, for each drop-down box, and selecting the option with string containing names[2], which is of course, "John".

$(document).ready(function() {
  //Array with names
  var names = ["Mark", "Susan", "John"];
  var arrayLength = names.length;

  for(i = 0; i < 3; i++){
    for(j = 0; j < arrayLength; j++){
      $("#select_" + (i+1) + " option:contains(" + names[j] + ")").prop("selected", true);
      i++;
    }
  }
});

Upvotes: 1

Andriy Lozynskiy
Andriy Lozynskiy

Reputation: 2604

You can just change i to j here: 

$("#select_" + (j+1) + " option:contains(" + names[j] + ")").prop("selected", true);

But you don't need nested loops here. One is enough:

for(j = 0; j < arrayLength; j++){
        $("#select_" + (j+1) + " option:contains(" + names[j] + ")").prop("selected", true);
    }

Upvotes: 3

Related Questions