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?

@EzioMercer If we have to select every `tester` then shouldn't we have to make id the same? — Undefined, Mar 03 '22 at 16:42
There must not be another element on the same page with the same id — EzioMercer, Mar 03 '22 at 16:44
And can you please paste your code to publish place where we can run it? For example on [codepen.io](https://codepen.io/) — EzioMercer, Mar 03 '22 at 16:46
The syntax `$(this option:contains(data))` is wrong. There would be an error in the console. Check https://stackoverflow.com/questions/306583/how-to-get-the-children-of-the-this-selector — James, Mar 03 '22 at 16:51
@James Oh, syntax error was the cause. Thanks for your comment — Undefined, Mar 03 '22 at 17:11

score 1 · Answer 1 · answered Mar 03 '22 at 17:10

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

EzioMercer · Answer 2 · 2022-03-03T16:58:18.413

0

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()

edited Mar 03 '22 at 16:58

answered Mar 03 '22 at 16:51

EzioMercer

1,502
2
7
23

Searching select option value using Jquery

2 Answers2