Jquery — how can i change values outside of DOM then inject? Asked Jan 28 '19 at 14:21 Active Jan 28 '19 at 14:55 Viewed 64 times 0 I'm creating html in javascript with jquery, which I will then set values and inject into the dom. See simple example below: var $html = $('<div><select class"target"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select></div>'); $html.find('.target').val('2'); $('body').html($html.prop('outerHTML')); However this does not work (it does work for text inputs). Any suggestions? javascript jquery asked Jan 28 '19 at 14:21 Haroldo 36,607 46 127 169 Without digging too deep, I noticed in your `select` element, it just says `class"target"` when it should probably say `class="target"`...wondering if that's your issue. – brianyates Jan 28 '19 at 14:23 (Correcting that typo doesn't fix the problem, no.) – Daniel Beck Jan 28 '19 at 14:31 why not just set the value and append the html? or is this just an example with static values? – treyBake Jan 28 '19 at 14:32 Possible duplicate of [jQuery - setting the selected value of a select control via its text description](https://stackoverflow.com/questions/496052/jquery-setting-the-selected-value-of-a-select-control-via-its-text-description) – yunzen Jan 28 '19 at 14:40 Possible duplicate of https://stackoverflow.com/questions/496052/jquery-setting-the-selected-value-of-a-select-control-via-its-text-description – yunzen Jan 28 '19 at 14:41 I suggest your issue is this: Settings the value of a `` element with jQuery's `.val()` method doesn't work, while settings the value of an `` will work: – yunzen Jan 28 '19 at 14:43

Answer 1

var $html = $('<div><select class="target"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select></div>');
$html.find('.target').val('2');
$('body').html($html);

I think this code should produce the correct output, the output that you are looking for. Rather than adding raw html, I appended an actual jQuery variable in your dom.

Also there was a typo for class name, it should be class="target"

Here is the working fiddle link

Answer 2

I can not understand what's meant by your code html($html.prop('outerHTML'))

If you want let $html into document you can create a div

$html.appendTo('div');

Answer 3

In case of a select HTMLElement, the selection is maintained internally in the selectedIndex attribute of the element object. Using $.val() on a select also maintains this correctly, but when $.prop('outerHTML') is used it's lost. When you append elements to the DOM, it's preserved:

var $html = $('<div><select class="target"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select></div>');
$html.find('.target').val('2');
$('body').html('').append($html);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>

<div class="target"></div>

Answer 4

var $html = $('<div><select class="target"><option value="1">1</option><option value="2">2!</option><option value="3">3</option></select></div>');
$html.find('.target').val(2);
$('body').append($html);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>