Searching select option value using Jquery

Question

<select id = "tester" class = "tester">
   ...
   <option value = "code_2">2</option>
</select>

<select id = "tester" class = "tester">
   ...
   <option value = "code_2">2</option>
</select>

If data value is 2, I am trying to select every tester whereby their option value contains 2 .

$('.tester').each(function() {
   $(this option:contains(data)).prop("selected", true);
})

Selecting every tester was successful but failed to change its option value. what could be the reason?

Answer 1

HTML:

<select class="tester" multiple>
    <option value="">N/A</option>
   <option value="code_2">2</option>
   <option value="code_2">2</option>
   <option value="code_2">2</option>
   <option value="code_2">2</option>
</select>

<select  class="tester" multiple>
   <option value="code_2">2</option>
   <option value="code_2">2</option>
   <option value="code_2">2</option>
   <option value="code_2">2</option>
</select>

Javascript with Jquery

var data = 2;
$(document).ready(function(){
  $('.tester').each(function() {
    $(this).children().each(function(i, element) {
        if($(element).text() == data){
            $(element).prop("selected", true)
        }
    });
})
});

NB: Don't use the same ID twice on the same page. To show multiple options selected. Use multiple Attribute on select tag

Answer 2

You can try this code if you want to use jQuery:

$('.tester').val('code_2').change();

Where:

.tester - is select selector

code_2 - is option value

This code allows you to don't search option by yourself

Check the documentation jQuery.val()