5

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'); }
Improve this question
6
  • 2
    but is it ok just to refer people to my question to jsFiddle - not only is it ok, it's super awsome! Commented Oct 4, 2012 at 12:36
  • 3
    It works for me in Chrome. I believe you'll want to set the value parameter of the option items, though like <option value='abc'>abc</option> Commented Oct 4, 2012 at 12:37
  • +1 on setting the value. Also, it works in FF15.0.1 Commented Oct 4, 2012 at 12:39
  • No. It doesn't work on my latest FF and latest Chrome. Try setting the drop down to DEF then click Control Off, and then click Control On. While that should set the select to DEF but it won't. Commented Oct 4, 2012 at 12:44
  • it works for me too (chrome 22). Commented Oct 4, 2012 at 12:48

5 Answers 5

Reset to default
2

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.

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

5 Comments

Thanks for your input and +1 for pointing out $(this) is not being updated to the new control after calling replaceWith. But my code is not complex, I had that because thats for more than one <select>. So again, your code is not generalized for more than one <select> but only works when there is one single <select>
@user1589188 Sure, but you never said that there are multiple. But if there are, you would have changed all <select>s ;) Please provide more context then (in your original question) so I can better reflect your situation in my code.
That has nothing to do with my code. Like I said, my code is generalized to cope with multiple <select>. Just add more <select> to the HTML and DONT change my code, you can see my code works on all of them. I just removed multiple <select> from the HTML part, just to make the example smaller. But thanks for your input anyway.
@user1589188 I understand that. What I meant is, that it doesn't say so in the question, which is why you have to expect that some will point that simplification out to you. It was just meant to be an advice for future questions ;)
Yes I see your point. I will try to further simplify my code or state it clearly next time. I copied my code directly this time for I fear that I might have done something wrong with my code.
1

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/

Improve this answer

3 Comments

Well that works but I am setting $(this), not ALL the <select>. Think about when I have more than one <select> with different values, I can't use your code. My question is $(this) has already been replaced by <select>, isn't $(this) now <select>? And of course <select> has val to be set.
@user1589188 - I totally see your point, its my bad as you were using the somewhat wide-reaching $('select') selector elsewhere in your example. I'll look again.
Thank you so much! Thats the way to do it! So its true that $(this) is not being updated after calling replaceWith. Weird! You see if you call alert($(this).text()) even after calling replaceWith, you're still getting the text in the span!!!
1

set value of options will solve your problem. jsfiddle

<select><option value='ABC'>ABC</option><option value="DEF">DEF</option></select>
Improve this answer

4 Comments

No it doesn't. Try setting the drop down to DEF then click Control Off, and then click Control On. You dont see the drop down select DEF, no?
This is irrelevant, if a value attribute is omitted, the value inherits from the text.
@Jamiec what if value and text are different? in that case your suggestion will fail.
But, crucially, in the OP question they are the same.
1 
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)!

Improve this answer

2 Comments

Yes I just realized that. But thats just weird to me. When will $(this) be updated??? I wonder whats happening behind replaceWith
this is the reference to the object to which the function was bounded, because of its nature, it can never be reassigned. If you're familiar with java/c++, you would understand the rationale.
-1

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"); }
Improve this answer

4 Comments

Thanks, but thats not what I want to achieve.
And what do you want to achieve? Because to have <select> tag with <span> tags inside is kinda nonsense (can contain only <option> and <optgroup> tags w3.org/TR/html401/interact/forms.html#h-17.6 ) and may behave differently on different browsers
No, I use replaceWith to replace <select> with <span>, not adding <span> inside <select>
Oops, sorry, my bad. I must be tired or something :-).

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.