CODEWITHSUNDEEP
javascriptjquery
Zaraki Kenpachi
Zaraki Kenpachi

Reputation: 5740

find option by array value

I have problem with finding option in select menu by array value.

var array = ["task1", "task2"]
var select = document.getElementsByTagName('select');
for (i = 0; i < 2; i++) {
  $(select).find('option[value=array[i]]').attr('selected', 'selected');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select">
  <option value="task1">task1</option>
  <option value="task2">task2</option>
</select>

Upper code returns error:

unrecognized expression: option[value=array[i]]

When i put string instead of array[i] everything is working.

How to make this work?

Upvotes: 0

Views: 80

Answers (4)

Satpal
Satpal

Reputation: 133453

You should use .val(value) to set the value of <select> element.

Additionally, if you want to set multiple values then specify multiple attribute with the element, .val(value) will work for both scenario

var array = ["task1", "task2"]
$('select').val(array);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h3>Single: </h3>
<select>
  <option value="task1">task1</option>
  <option value="task2">task2</option>
</select>

<h3>Multiple: </h3>
<select multiple>
  <option value="task1">task1</option>
  <option value="task2">task2</option>
</select>

Upvotes: 0

Mr. Polywhirl
Mr. Polywhirl

Reputation: 48733

Three things you need to change.

  1. $('select').first(); → You need to capture only ONE element.
  2. 'option[value="' + array[i] + '"]' → You need concatenate the string.
  3. array.length → Use this instead of the magic number "2"

let array = [ "task1", "task2" ];
let $select = $('select').first();
for (let i = 0; i < array.length; i++) {
  $select.find('option[value="' + array[i] + '"]').attr('selected', 'selected');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select">
  <option value="task1">task1</option>
  <option value="task2">task2</option>
</select>

Upvotes: 2

Carsten Massmann
Carsten Massmann

Reputation: 28236

Wow, what a flood of new answers. I will probably delete mine in time. Just one point I noticed: if you want to be able to select multiple values, you need to provide the multiple attribute in your <select> element. 

var array = ["task1", "task2"];
var sel=$('select');
for (var i = 0; i < array.length; i++) 
 { $('option[value='+array[i]+']', sel).attr('selected', 'selected');}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select" multiple>
  <option value="task1">task1</option>
  <option value="task2">task2</option>
  <option value="task3">task3</option>
</select>

Upvotes: 0

Dana C
Dana C

Reputation: 111

You need to make sure that the array[i] is a variable injected into the string - at the moment jQuery is seeing 'option[value=array[i]]' and treating the whole thing as a string. Using 'option[value='+array[i]+']' will inject your variable containing the relevant value into the string instead.

var array = ["task1", "task2"]
var select = document.getElementsByTagName('select');
for (i = 0; i < 2; i++) {
  $(select).find('option[value='+array[i]+']').attr('selected', 'selected');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select">
  <option value="task1">task1</option>
  <option value="task2">task2</option>
</select>

Upvotes: 3

Related Questions