How to programmatically select an option inside a variable using jQuery

Question

Let say I have this variable html which contain these select options:

var html = '<select>'+
             '<option value="10">10</option>'+
             '<option value="20">20</option>'+
            '</select>';

How can I programmatically select an option which is inside the html variable so when I append them to somewhere, for example

$(this).children('div').append(html);

it will become like this:

<div> <!-- children div of the current scope -->
  <select>
    <option value="10" selected>10</option>
    <option value="20">20</option>
  </select>
</div>

How is it possible?

edit: the variable contents is generated from remote locations, and I must change the value locally before it is being appended into a div. Hence, the question.

edit 2: sorry for the confusion, question has been updated with my real situation.

You can append them and then update the selected property thereafter. — Terry, Dec 22 '16 at 02:04
@Terry that's the part I'm stuck until now. mind to share some answer? (please) *wink-wink* — Fariz Luqman, Dec 22 '16 at 02:06
This can help you: http://stackoverflow.com/questions/314636/how-do-you-select-a-particular-option-in-a-select-element-in-jquery#comment46279592_6068322 — Arnaldo, Dec 22 '16 at 02:07
@Terry the variable html is generated and I have no control over them — Fariz Luqman, Dec 22 '16 at 02:07
you could try simply setting the value of the drop-down to the one you wish to 'select' - like `$("#select_handle select").val( a_value );` - if `a_value` is 10 it will add the needed HTML to the DOM node — blurfus, Dec 22 '16 at 02:22

Mr. Polywhirl · Accepted Answer · 2016-12-22T02:19:52.133

7

You can cast the HTML into a jQuery element and select the value at index 0. Then you can add it to the DOM.

Here is a simple jQuery plugin to select an option by index.

(function($) {
  $.fn.selectOptionByIndex = function(index) {
    this.find('option:eq(' + index  + ')').prop('selected', true);
    return this;
  };
  $.fn.selectOptionByValue = function(value) {
    return this.val(value);
  };
  $.fn.selectOptionByText = function(text) {
    this.find('option').each(function() {
      $(this).attr('selected', $(this).text() == text);                                 
    });
    return this;
  };
})(jQuery);

var $html = $([
  '<select>',
    '<option value="10">10</option>',
    '<option value="20">20</option>',
  '</select>'
].join(''));

$('#select-handle').append($html.selectOptionByIndex(0));
// or
$html.selectOptionByValue(10);
// or
$html.selectOptionByText('10');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="select-handle"></div>

edited Dec 22 '16 at 02:19

answered Dec 22 '16 at 02:12

Mr. Polywhirl

42,981
12
84
132

2

splendid. no any other words to say. $('#select-handle').append($html.selectOptionByIndex(0)); <<<< this is what I'm looking for. thank you – Fariz Luqman Dec 22 '16 at 02:21
@Mr.Polywhirl cool solution... that's why I like SO so much - always gives you something to learn :) – kukkuz Dec 22 '16 at 02:26
just out of curiousity, would this statement `this.find('option:eq(' + index + ')').prop('selected', true);` end up making multiple selected option? – Jeffrey04 Dec 22 '16 at 06:16
@Jeffrey04 the `:eq()` part makes it select just the given index. If you set another one to selected, it will deselect the previous option, unless the ` – Schism Dec 22 '16 at 08:36

score 5 · Answer 2 · answered Dec 22 '16 at 02:29

You could try simply setting the value of the drop-down to the one you wish to 'select' - like $("#select_handle select").val( a_value );

For example, if a_value is 30 it will add the needed HTML to the DOM node. This would be my take:

$(function() {
  var html = '<select>' +
      '<option value="10">10</option>' +
      '<option value="20">20</option>' +
      '<option value="30">30</option>' +
      '<option value="40">40</option>' +
      '<option value="50">50</option>' +
    '</select>';

  // set a value; must match a 'value' from the select or it will be ignored
  var a_value = 30; 

  // append select HTML
  $('#select_handle').append(html);

  // set a value; must match a 'value' from the select or it will be ignored
  $("#select_handle select").val(a_value);

});

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

<h2>select added below</h2>
<div id="select_handle">
</div>

score 4 · Answer 3 · answered Dec 22 '16 at 02:12

4

By default, the first option will be selected - if you want to do on any other set it so using the index as soon as the select is appended:

$('#select_handle option:eq(1)').prop('selected', true)

(this selects the second option)

See demo below:

var html = '<select>'+
             '<option value="10">10</option>'+
             '<option value="20">20</option>'+
            '</select>';
$('#select_handle').append(html);
$('#select_handle option:eq(1)').prop('selected', true);

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

answered Dec 22 '16 at 02:12

kukkuz

41,512
6
59
95

can I select the option before the selectbox is being appended into #select_handle? thanks – Fariz Luqman Dec 22 '16 at 02:15
1

@FarizLuqman normally I wait for the DOM to update and use something like `ng-init` (because I use angular) but *Mr. Polywhirl*'s answer is a new thing for me... :) – kukkuz Dec 22 '16 at 02:35
1

on normal times, I will also do that by using solutions my fellow friends provided before him (again sorry for not clearing the question) but to update the element *before* the DOM is updated, that may take some advanced level of understanding, and hence, a new lesson to be learned by all :) – Fariz Luqman Dec 22 '16 at 02:39

score 3 · Answer 4 · answered Dec 22 '16 at 02:09

3

selected="selected" will work

var html = '<select>'+
             '<option value="10">10</option>'+
             '<option value="20" selected="selected">20</option>'+
            '</select>';

            $('#select_handle').append(html);

answered Dec 22 '16 at 02:09

Payal2299

148
6

The variable html is completely generated by remote location, and the only choice I have is to modify the content of the variable. – Fariz Luqman Dec 22 '16 at 02:10
$("#select_handle option[value=10]").attr('selected','selected'); will help – Payal2299 Dec 22 '16 at 02:17

score 3 · Answer 5 · answered Dec 22 '16 at 02:13

3

You can do this in jQuery using the .attr() function and nth pseudo-selector.

Like so:

$("option:nth-child(1)").attr("selected", "");

Hope it helps! :-)

answered Dec 22 '16 at 02:13

GROVER.

4,071
2
19
66

score 2 · Answer 6 · edited Dec 22 '16 at 02:34

2

after the append, try $('#select_handle select').val("10"); or 20 or whatever value you want to select

edited Dec 22 '16 at 02:34

blurfus

13,485
8
55
61

answered Dec 22 '16 at 02:20

Taki

17,320
4
26
47

How to programmatically select an option inside a variable using jQuery

6 Answers6