set dropdown value by text using jquery

Question

I have a dropdown as:

<select id="HowYouKnow" >
  <option value="1">FRIEND</option>
  <option value="2">GOOGLE</option>
  <option value="3">AGENT</option></select>

In the above dropdown i know the text of the dropdown. How can set the value of the dropdown in document.ready with the text using jquery?

Peter J · Accepted Answer · 2012-06-12T20:35:20.457

226

This is a method that works based on the text of the option, not the index. Just tested.

var theText = "GOOGLE";
$("#HowYouKnow option:contains(" + theText + ")").attr('selected', 'selected');

Or, if there are similar values (thanks shanabus):

$("#HowYouKnow option").each(function() {
  if($(this).text() == theText) {
    $(this).attr('selected', 'selected');            
  }                        
});

edited Jun 12 '12 at 20:35

answered Dec 11 '09 at 15:48

Peter J

57,680
8
38
45

11

This does not work in the case where your `select` list contains `options` with similar text values, ie `` - thoughts on how to handle this? – shanabus Jun 12 '12 at 20:23
1

To handle the similar values prolem you can get the first match with the index [0] (the default returns the last index) like this: $("#HowYouKnow option:contains(" + theText + ")").attr('selected', 'selected')[0]; – Asmussen Dec 05 '12 at 03:17
4

The above methods are broken in jquery from version 1.9.1 and newer. Change .attr to .prop -> test here: http://jsfiddle.net/RB5wU/579/ – thomas nn Aug 30 '13 at 15:34
Your fiddle works for me. .attr isn't deprecated yet. – Peter J Sep 05 '13 at 19:53
If it isn't multiple select, break each loop with return false from anonymous function. – Line Nov 28 '14 at 13:18
It should be noted that, if possible, you should create the markup so that the *values* of your options match up with what you're trying to set. Then you can set the value of the select with jQuery. If your options used values that you knew, such as: ` – cloudworks Aug 17 '15 at 18:24

score 17 · Answer 2 · answered Apr 20 '13 at 00:35

17

For the exact match use

    $("#HowYouKnow option").filter(function(index) { return $(this).text() === "GOOGLE"; }).attr('selected', 'selected');

contains is going to select the last match which might not be exact.

answered Apr 20 '13 at 00:35

Parham

1,037
11
17

1

In my case `.attr()` did changed `selected` option in dom but text displayed did not changed, `.prop()` on other hand would do both things at a time. – abdul qayyum Nov 28 '19 at 08:48

score 4 · Answer 3 · edited Oct 13 '17 at 07:12

4

try this..

$(element).find("option:contains(" + theText+ ")").attr('selected', 'selected');

edited Oct 13 '17 at 07:12

Hkachhia

4,463
6
41
76

answered Oct 17 '16 at 10:20

Divy

41
1

score 4 · Answer 4 · edited Mar 19 '14 at 15:15

4

$("#HowYouKnow option[value='" + theText + "']").attr('selected', 'selected'); // added single quotes

edited Mar 19 '14 at 15:15

Community

1
1

answered Dec 01 '10 at 07:31

Vinay saini

57
1
1

2

Think this only works with the index not the text. – Simon Keep Jan 06 '12 at 16:46

score 2 · Answer 5 · answered Feb 08 '12 at 16:29

2

var myText = 'GOOGLE';

$('#HowYouKnow option').map(function() {
    if ($(this).text() == myText) return this;
}).attr('selected', 'selected');

answered Feb 08 '12 at 16:29

Matthew Feerick

21
1

juhi · Answer 6 · 2014-06-09T11:31:40.393

1

For GOOGLE, GOOGLEDOWN, GOOGLEUP i.e similar kind of value you can try below code

   $("#HowYouKnow option:contains('GOOGLE')").each(function () {

                        if($(this).html()=='GOOGLE'){
                            $(this).attr('selected', 'selected');
                        }
                    });

In this way,number of loop iteration can be reduced and will work in all situation.

edited Jun 09 '14 at 11:31

answered Jun 09 '14 at 11:26

juhi

320
1
3
15

score 1 · Answer 7 · answered Sep 27 '15 at 18:28

The below code works for me -:

jQuery('[id^=select_] > option').each(function(){
        if (this.text.toLowerCase()=='text'){
            jQuery('[id^=select_]').val(this.value);
        }
});

jQuery('[id^=select_]') - This allows you to select drop down where ID of the drop down starts from select_

Hope the above helps!

Cheers S

score 0 · Answer 8 · answered Feb 02 '11 at 21:03

Here is an simple example:

$("#country_id").change(function(){
    if(this.value.toString() == ""){
        return;
    }
    alert("You just changed country to: " + $("#country_id option:selected").text() + " which carried the value for country_id as: " + this.value.toString());
});

score -1 · Answer 9 · edited Dec 11 '09 at 16:40

-1

$("#HowYouKnow").val("GOOGLE");

edited Dec 11 '09 at 16:40

BalusC

1,082,665
372
3,610
3,555

answered Dec 11 '09 at 15:47

dell

81
1
1
4

$(document).ready(function() { $("#HowYouKnow").val("GOOGLE"); }); Sets the value too... not sure why I got down voted! – dell Dec 11 '09 at 16:16
13

Maybe because that only works if your `option` value is the same as the text. So in the OP's example, the GOOGLE text option has a value of `2` so it does not work. – shanabus Jun 12 '12 at 20:26
1

This will only set based on the value box, not based on the dropdowns text. – BrettC Feb 28 '18 at 16:18

score -1 · Answer 10 · answered Dec 11 '09 at 15:48

-1

$("#HowYouKnow option:eq(XXX)").attr('selected', 'selected');

where XXX is the index of the one you want.

answered Dec 11 '09 at 15:48

helloandre

10,541
8
47
64

How can i get the index of the text? – Prasad Dec 11 '09 at 15:49
See my answer...tested and working. – Peter J Dec 11 '09 at 16:05
4

the question is set dropdown value by text, not by index. – Cheung Feb 28 '11 at 07:42
This doesn't answer the question. The OP wants to set the selection based on the text, not the index. – David Clarke Oct 27 '15 at 21:42

score -1 · Answer 11 · answered Jan 29 '16 at 11:05

-1

This is worked both chrome and firefox

set value in to dropdown box.

var given = $("#anotherbox").val();
$("#HowYouKnow").text(given).attr('value', given);

answered Jan 29 '16 at 11:05

Naveenbos

2,532
3
34
60

Don't think so... $("#HowYouKnow").text(.....) will remove all the options – Ayo Adesina May 31 '19 at 20:16

set dropdown value by text using jquery

11 Answers11

Linked