How to add an attribute to an HTML string

Question

I want to set the 'selected' attribute in a select option list with javascript/jquery. I have the select element in a jquery object, I just want to add the "selected" attribute to and item in the list.

$(mySelect).html() looks like this;

<option value="LININGER LAKE">LININGER LAKE</option>
<option value="MOOREDALE LAKE">MOOREDALE LAKE</option>
<option value="CARTER LAKE">CARTER LAKE</option>

I need to find the "CARTER LAKE" option and add the selected attribute to it so the HTML looks like this

<option value="LININGER LAKE">LININGER LAKE</option>
<option value="MOOREDALE LAKE">MOOREDALE LAKE</option>
<option value="CARTER LAKE" selected="selected">CARTER LAKE</option>

I know this can't be that hard, I'm just having a brain fart!

Why not just set the selectedIndex or value of the containing <select> element? — Niels Keurentjes
– Niels Keurentjes, Commented Sep 19, 2014 at 15:34
Can you post a complete code example please? What's mySelect? — j08691
– j08691, Commented Sep 19, 2014 at 15:35
I was framing this problem wrong, I should not have been digging into the html, just sticking to jquery methods was much easier. Per Yury Tarabanko answer, setting the .val() on the select element did the trick. Thanks for all the fast replies and help! — SteveO7
– SteveO7, Commented Sep 19, 2014 at 16:39

Dave · Accepted Answer · 2014-09-19 16:59:08Z

2

As simple as $(mySelect).val('CARTER LAKE')

Demo

edited Sep 19, 2014 at 16:59

Dave

11k3 gold badges45 silver badges54 bronze badges

answered Sep 19, 2014 at 15:38

Yury Tarabanko

45.1k10 gold badges88 silver badges99 bronze badges

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

1 Comment

SteveO7 Over a year ago

Duh... I was making this WAY too complicated!! Thanks for bringing back to earth!

Dave · Accepted Answer · 2014-09-19 15:36:14Z

2

Use the jQuery Attribute Equals selector:

$(mySelect).find('option[value="CARTER LAKE"]').prop("selected", "selected");

answered Sep 19, 2014 at 15:36

Dave

11k3 gold badges45 silver badges54 bronze badges

Comments

Damian Polac · Accepted Answer · 2014-09-19 15:36:48Z

2

$('option[value="CARTER LAKE"]').prop( "selected" );

or

$('option[value="CARTER LAKE"]').attr( "selected", "selected" );

answered Sep 19, 2014 at 15:36

Damian Polac

9349 silver badges20 bronze badges

Comments

Kartikeya Khosla · Accepted Answer · 2014-09-19 15:47:14Z

2

Try .contains() as shown

 $("select option:contains('CARTER LAKE')").attr('selected','selected')

OR

 $("select option:contains('CARTER LAKE')").prop('selected',true)

DEMO

edited Sep 19, 2014 at 15:47

answered Sep 19, 2014 at 15:36

Kartikeya Khosla

18.9k8 gold badges46 silver badges70 bronze badges

Comments

Rituraj ratan · Accepted Answer · 2014-09-19 15:54:35Z

1

Try by attr()

$(document).ready(function(){
  
$('option[value="CARTER LAKE"]').attr( "selected", "selected" );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value="LININGER LAKE">LININGER LAKE</option>
<option value="MOOREDALE LAKE">MOOREDALE LAKE</option>
<option value="CARTER LAKE">CARTER LAKE</option>
  </select>

answered Sep 19, 2014 at 15:54

Rituraj ratan

10.4k8 gold badges38 silver badges55 bronze badges

Collectives™ on Stack Overflow

How to add an attribute to an HTML string

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related