Selecting elements within a string

Question

I have a string:

var html = '<select">\
<option></option>\
<option>Mr</option>\
<option>Mrs</option>\
<option>Ms</option>\
<option>Master</option>\
<option>Miss</option>\
<option>Dr</option>\
<option>TBA</option>\
</select>';

I'm wanting to place a selected within the 'Master' option. How could I do this?

I've tried:

var html = $($(html).find("option").filter(function () { return $(this).html() == "Master"; }).prop('selected', true));

I don't know how to search a string like I would the DOM.

JSBIN

can you add values to the options? It would be easier to mark as "selected" — LordNeo, May 27 '16 at 14:22
Convert it to a dom node and then you can traverse it like you would any other dom tree. — evolutionxbox, May 27 '16 at 14:24

score 4 · Accepted Answer · answered May 27 '16 at 14:25

4

Why not just do a string replace like this:

html = html.replace('<option>Master</option>','<option selected>Master</option>');

answered May 27 '16 at 14:25

SunKnight0

3,331
1
10
8

quick and easy FTW – IMTheNachoMan May 27 '16 at 14:28

Pranav C Balan · Answer 2 · 2016-05-27T14:30:59.210

Use :contains() selector and set attribute using attr()

$(this).html() == "Master";
}).prop('selected', true));
var html = '<select>\
<option></option>\
<option>Mr</option>\
<option>Mrs</option>\
<option>Ms</option>\
<option>Master</option>\
<option>Miss</option>\
<option>Dr</option>\
<option>TBA</option>\
</select>';

console.log(
  $(html)
  .find('option:contains("Master")') // getoption which contains master
  .attr('selected', true) // set selected attribute
  .end()[0].outerHTML // back to previous selector and get dom  object and it's outerHTML property
)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

With filter() method

var html = '<select>\
<option></option>\
<option>Mr</option>\
<option>Mrs</option>\
<option>Ms</option>\
<option>Master</option>\
<option>Miss</option>\
<option>Dr</option>\
<option>TBA</option>\
</select>';

console.log(
  $(html)
  .find("option") // get all options
  .filter(function() { // filter option which contains master
    return $(this).text() == "Master";
  }).attr('selected', true) // set selected attribute
  .end() // back to option selector
  .end()[0].outerHTML // back to html selector and get dom  object and it's outerHTML property
)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

score 1 · Answer 3 · answered May 27 '16 at 14:28

1

Change your code to:

/*jshint multistr: true */
var html = 
 '<select class="form-control honorific">\
   <option>Mr</option>\
   <option>Mrs</option>\
   <option>Ms</option>\
   <option>Master</option>\
   <option>Miss</option>\
   <option>Dr</option>\
   <option>TBA</option>\
 </select>';

$(function() {
    var temp = "Master"; 
    $('body').append(html);
    $(".form-control").val(temp);
});

answered May 27 '16 at 14:28

Huy Chau

2,178
19
26

Can you explain what this wil do? – putvande May 27 '16 at 14:33
Find element with class name is `.form-control` (it should be a id) and set value (default selected) for it is `Master` – Huy Chau May 27 '16 at 14:40

score -2 · Answer 4 · edited May 23 '17 at 12:08

-2

This may help :

var elements = $(theHtmlString);
var found = $('.FindMe', elements);

Source:How to get an HTML element from a string with jQuery

edited May 23 '17 at 12:08

Community

1
1

answered May 27 '16 at 14:26

Sangamesh Davey

75
1
7

Because this answer the specific question. It only shows how to select a specific element but not how to add an attribute or anything. – putvande May 27 '16 at 14:34

Selecting elements within a string

4 Answers4