Using jQuery to add text of each dropdown option as its value

Question

I am using the jQuery load() function to load an HTML file containing a multiple select menu

<select multiple>
<optgroup label="optgroup1">   
<option>A</option>
<option>B</option>
<option>C</option>
</optgroup>
</select>

(there are further optgroups and options in the real code)

In the callback I would like to add a value to each <option> which equals the value of the text, so the final HTML would be:

<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>

The closest I have managed is

$("option").each(function() {
    $("option").attr('value', $(this).text());
});

Unfortunately, when I inspect the code I see that this is adding the text from the last option to each value:

<option value="A">C</option>
<option value="B">C</option>
<option value="C">C</option>

How should I be doing this?

Pavan Teja · Accepted Answer · 2016-02-25 11:58:49Z

1

try this

$("option").each(function() {
    $(this).attr('value', $(this).text());
});

answered Feb 25, 2016 at 11:58

Pavan Teja

3,2021 gold badge18 silver badges22 bronze badges

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

1 Answer 1