Set selected <select> option using jQuery based on value not text

Question

I am working on some HTML/JavaScript code.

I have the following box.

<select style="height: 90px;" id="cboApplications" name="cboApplications[]" multiple> <option value="1">App 1</option> <option value="2">App 2</option> <option value="3">App 3</option> </select>

I have the following JavaScript code

$("#cboApplications option[value=2]").attr("selected", "selected");

For some reason though, nothing gets selected, and no errors are shown.

JGV · Accepted Answer · 2015-06-03 18:05:59Z

3

You are very close. You need to enclose 2 with quotes, it will fix your issue.

$("#cboApplications option[value='2']").attr("selected", "selected");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <select style="height: 90px;" id="cboApplications" name="cboApplications[]" multiple> <option value="1">App 1</option> <option value="2">App 2</option> <option value="3">App 3</option> </select>

answered Jun 3, 2015 at 18:05

JGV

5,2079 gold badges57 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Boardy Over a year ago

Thanks but for some reason this hasn't worked. Still doesn't get selected and no errors

Boardy Over a year ago

Thanks this has worked after all, as I mentioned in another answer, I was calling the functions in the wrong order to populate and select

Satpal Over a year ago

@Boardy, I would still recommend you to use either .val() or .prop() Go through stackoverflow.com/questions/5874652/prop-vs-attr Now Its up to you to decide whether to use best practice or not

Boardy Over a year ago

I found when I used the val it would only set 1 item and I need to be select multiple items

Satpal · Accepted Answer · 2015-06-03 18:04:16Z

1

You should use .val() to set the value.

A string of text, a number, or an array of strings corresponding to the value of each matched element to set as selected/checked.

$("#cboApplications").val(2);

OR

$("#cboApplications option[value=2]").prop("selected", true);

answered Jun 3, 2015 at 18:04

Satpal

134k13 gold badges168 silver badges171 bronze badges

3 Comments

Boardy Over a year ago

Thanks but neither of these have worked for me for some reason

Satpal Over a year ago

@Boardy, See it works jsfiddle.net/satpalsingh/bygp5kve Can you share more information? Are you using AJAX or some other framework?

Boardy Over a year ago

D'oh, I was calling a couple of functions in the wrong order, I was selecting it, then populating it. Thanks for your help

Tariq · Accepted Answer · 2015-06-03 18:05:22Z

0

Use this: $("#cboApplications").val(2);

answered Jun 3, 2015 at 18:05

Tariq

2,8813 gold badges24 silver badges29 bronze badges

1 Comment

ivan.sim Over a year ago

Providing some explanation in your answer will help your readers to learn.

Collectives™ on Stack Overflow

Set selected <select> option using jQuery based on value not text

3 Answers 3

4 Comments

3 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

3 Comments

1 Comment

Linked

Related