How can I replace all option labels of a select with their values?

Question

If I have select element with values which are different from their labels, how can I replace all of the labels with the corresponding values?

Secondly, how can I sort the list alphabetically with the values, all without using any frameworks?

Input:

<select name="options" >
    <option value="apple">Fruit</option>
    <option value="rye">Bread</option>
    <option value="beer">Beverage</option>  
</select>

Output:

<select name="options" >
    <option value="apple">apple</option>
    <option value="beer">beer</option>  
    <option value="rye">rye</option>
</select>

score 3 · Answer 1 · edited May 23 '17 at 10:34

3

Sure, using getElementsByTagName() and innerHTML:

var allOptions = document.getElementsByTagName("option");
for (var i=0; i<allOptions.length; i++) {
   allOptions[i].innerHTML = allOptions[i].value;
}

Here it is in action.

To sort the options alphabetically, see: Javascript to sort contents of select element

edited May 23 '17 at 10:34

Community

1
1

answered Feb 08 '12 at 18:21

Michael Berkowski

267,341
46
444
390

thank you! so concise! how can I sort the list alphabetically with the values? – Steve Brown Feb 08 '12 at 18:24
@SteveBrown Sorry I missed the part about sorting. See the linked question for a solution to sort them. – Michael Berkowski Feb 08 '12 at 18:27

score 0 · Answer 2 · answered Oct 05 '16 at 10:15

You can encapsulate this in a function to order your select, and order when you remove or add any element to your select.

The function would be something like this:

function sortSelect(selElem) {
    var tmpAry = new Array();
    for (var i=0;i<selElem.options.length;i++) {
        tmpAry[i] = new Array();
        tmpAry[i][0] = selElem.options[i].text;
        tmpAry[i][1] = selElem.options[i].value;
    }
    tmpAry.sort();
    while (selElem.options.length > 0) {
        selElem.options[0] = null;
    }
    for (var i=0;i<tmpAry.length;i++) {
        var op = new Option(tmpAry[i][0], tmpAry[i][1]);
        selElem.options[i] = op;
    }
    return;
}

And you should call it like :

sortSelect(document.getElementsByName("options"));

score 0 · Answer 3 · answered Feb 08 '12 at 18:24

0

If you would like them to be identical, you can simply omit the value attribute - the string inside the option tag will then be sent to the server as the value. Take a look here: http://www.w3schools.com/tags/att_option_value.asp.

answered Feb 08 '12 at 18:24

Artyom

1,599
12
22

although not using jQuery here i heard that jQuery sometimes has problems if you don't specify the value in the option tag. also is it not best practice to specify values using the value attribute? – Steve Brown Feb 08 '12 at 18:28
The `value` attribute is optional even if you are using DTD Strict, so I would assume that omitting the attribute is standard practice. Regarding jQuery, I haven't come across anything of the sort. But in case you are referring to the bug described at http://bugs.jquery.com/ticket/5452, then it seems to have only affected IE, and seems to be fixed as of jQuery 1.4.4. – Artyom Feb 08 '12 at 18:38
affects chrome too. "you can't rely on jQuery using the text content in lieu of the value attribute. It will work for a filter, but not necessarily for DOM selection. In Chrome, this will show 1 instead of 2 matched elements http://jsfiddle.net/wNmLF/2/ " – Steve Brown Feb 08 '12 at 18:41
I'd assume that is correct behavior, since your selector filter is based on an attribute name-value pair, and the second dropdown is lacking it. Firefox 9 and IE 9 are behaving in the same way. This is how I would expect this selector to behave if I wrote it in CSS, too. – Artyom Feb 08 '12 at 18:50

caleb · Answer 4 · 2012-02-08T18:55:13.423

0

You can do this:

<select name="options" >
    <option value="apple">Fruit</option>
    <option value="rye">Bread</option>
    <option value="beer">Beverage</option>  
</select>

<script>

    var options = document.getElementsByName("options")[0].querySelectorAll("option");
    Array.prototype.slice.call(options).map(function (option) {
        option.innerHTML = option.value;
    });
</script>

edited Feb 08 '12 at 18:55

answered Feb 08 '12 at 18:29

caleb

1,579
12
12

`querySelectorAll` is not a function available in standard JS as far as I know. Also you should have `option.innerHTML=option.value` and not the other way around. finally this does not sort alphabetically. – Steve Brown Feb 08 '12 at 18:35
I'm going to give you -1 for posting code that doesn't work and doesn't solve the question. will give a +1 if you come back and fix it. – Steve Brown Feb 08 '12 at 18:44
Also, I was about to do the sorting when I saw someone else post a link to another answered question. Do you want me to remove my answer all together then? – caleb Feb 08 '12 at 18:58
hmm, what is `querySelectorAll`? what browser does that work in? – Steve Brown Feb 08 '12 at 19:06

How can I replace all option labels of a select with their values?

4 Answers4