Dynamic setting of html options of a select box does not appear in select html

Question

We can dynamically mark some options with jquery

With below select:

<select name='strings' id="strings" multiple style="width:100px;">
    <option value="Test">Test</option>
    <option value="Prof">Prof</option>
    <option value="Live">Live</option>
    <option value="Off">Off</option>
    <option value="On">On</option>
</select>

The below js will select Test,Prof,Off

var values="Test,Prof,Off";
$.each(values.split(","), function(i,e){
    $("#strings option[value='" + e + "']").prop("selected", true);
});

console.log( $("#strings").html() );

http://jsfiddle.net/3f0ea4dc/

This works fine ...

But the $("#strings").html() does not mark options as selected. So I expected to see

  <option value="Test" selected>Test</option>

But I see

  <option value="Test">Test</option>.

Any comments ?! Is there any way I can get the html with selected!

Steeve Pitis · Accepted Answer · 2016-10-04 13:58:56Z

2

Just replace prop() by attr() it will work as expected ;)

answered Oct 4, 2016 at 13:58

Steeve Pitis

4,4631 gold badge24 silver badges25 bronze badges

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

Comments

Anand Systematix · Accepted Answer · 2016-10-04 14:02:15Z

1

Please try below code :-

$.each(values.split(","), function(i,e){
    $("#strings option[value='" + e + "']").attr("selected", true);
});

http://jsfiddle.net/3f0ea4dc/3/

answered Oct 4, 2016 at 14:02

Anand Systematix

6325 silver badges15 bronze badges

Collectives™ on Stack Overflow

Dynamic setting of html options of a select box does not appear in select html

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related