jQuery .val() not setting the value of <select>

Question

I would like to know why jQuery's .val() function is not setting the value of the <select> control for me after I called replaceWith, but it is working otherwise.

Please see here for a (not) working example .

<select><option>ABC</option><option>DEF</option></select>
<input type="button" onclick="ControlOff()" value="Turn Off Control" />
<input type="button" onclick="ControlOn()" value="Turn On Control" />
<input type="button" onclick="Test()" value="Value Setting Test" /> 
function ControlOff() {
    $('select').each(function () {
        $(this).replaceWith('<span class="select-type">' + $(this).val() + '</span>');
    });
}

function ControlOn() {
    $('.select-type').each(function () {
        var selected = $(this).text();
        $(this).replaceWith('<select><option>ABC</option><option>DEF</option></select>');
        $(this).val(selected);
    });
}

function Test() {
    $('select').val('DEF');
}

Answer 1

The problem is, that $(this) in $(this).val(selected) refers to the removed <span> element, not your new element. You need to replace it with:

$('select').val(selected);

to grab the previously inserted new element.

Also, your code is unecessarily complex, this does the same thing, but simpler:

function ControlOn() {
    $selectText = $('.select-type');
    var selected = $selectText.text();
    $selectText.replaceWith('<select><option>ABC</option><option>DEF</option></select>');
    $('select').val(selected); // Use an id instead to match: #my-select-id
}

Make sure to give the <select> element an ID, otherwise it's going to mess up once you introduce a new <select> element somewhere else on the page.

See here for a working example.

Answer 2

The problem is that in ControlOn you have an each which is looping over .select-type elements which are span 's and spans cannot be set with the val method:

You can fix this by changing the method to this:

function ControlOn() {
    $('.select-type').each(function () {
        var selected = $(this).text();
        var $select = $('<select><option>ABC</option><option>DEF</option></select>');
        $(this).replaceWith($select)
        $select.val(selected);
    });
}

Live example: http://jsfiddle.net/qSYYc/4/

Answer 3

set value of options will solve your problem. jsfiddle

<select><option value='ABC'>ABC</option><option value="DEF">DEF</option></select>

Answer 4

function ControlOn() {
    $('.select-type').each(function () {
        var selected = $(this).text();
        $(this).replaceWith($('<select><option>ABC</option><option>DEF</option></select>').val(selected));
    });
}

Rewrite your code like above, it would work!

The element referenced by this won't change to the select element you just created, it will always be the span element inside the scope of that function. Therefore you should set the value to the newly created select instead of the invariant $(this) !

Answer 5

I'd suggest you to use "disabled" attribute to turn select on and off, it, won't mess up the .val() functionality

function ControlOff() {
    $("select").attr("disabled", "disabled");
}

function ControlOn() {
    $("select").removeAttr("disabled");
}