0

I have trouble reordering the options within a select box by value, from lowest to highest programatically. Whatever I have tried continues to order the list alphabetically, and I cannot find a way to control it based by the value.

The select field in question:

<select class="jet-select__control" name="koncert-dag">
        
    <option value="" data-label="VÆLG DAG" data-counter-prefix="(" data-counter-suffix=")">VÆLG DAG</option>
        <option value="42" data-label="Fredag" data-counter-prefix="(" data-counter-suffix=")">Fredag</option>
        <option value="43" data-label="Lørdag" data-counter-prefix="(" data-counter-suffix=")">Lørdag</option>
        <option value="44" data-label="Søndag" data-counter-prefix="(" data-counter-suffix=")">Søndag</option>
        <option value="41" data-label="Torsdag" data-counter-prefix="(" data-counter-suffix=")">Torsdag</option>
</select>

My boss ordered this done in a brick builder (Elementor / Wordpress) which prohibits me from just arranging it like I usually would (annoying). So I am trying to force it into the order of 41 - 44 with JavaScript. My best bet is this line of code, which only flips it upside down so 41 is first, followed by 44, 43, 42.

<script>
const setId = document.querySelector('.jet-select__control');

setId.setAttribute('id', 'reorder-list');

 
window.onload = function sortOptions() {
    var options = document.getElementById('reorder-list').options;
    var optionsArray = [];
    for (var i = 0; i < options.length; i++) {
        optionsArray.push(options[i]);
    }
    optionsArray = optionsArray.sort(function (a, b) {           
        return a.HTMLSelectElement.options.charCodeAt(0) - b.HTMLSelectElement.options.charCodeAt(0);    
    });

    for (var i = 0; i <= options.length; i++) {
        options[i] = optionsArray[i];
    }
    options[0].selected = true;
}

sortOptions();
    
</script>

Is there a way to make it use the values instead? Or just through JavaScript simply force it to do a certain order that I define?

Dannie
  • 133
  • 10
  • So why are you sorting your options by the first character of their innerHTML content then, when you said you wanted to sort them by the content of their value attribute? – CBroe Nov 03 '22 at 12:24
  • I can't for the life of me find the selector for targeting the options – Dannie Nov 03 '22 at 12:36
  • `HTMLSelectElement.options` returns a read-only list, so your attempt to modify the options using `options[i] = ...` most likely won't work. And the ID you are using to try and find your select element, does not appear to be set on the element? – CBroe Nov 03 '22 at 12:47
  • Correct, the ID is injected before : const setId = document.querySelector('.jet-select__control'); setId.setAttribute('id', 'reorder-list'); Should have put that in the question as well, I can see the confusion Hm, if not through options[i], how would I get around it? – Dannie Nov 03 '22 at 12:50
  • https://stackoverflow.com/questions/8674618/adding-options-to-select-with-javascript, https://stackoverflow.com/a/55897038/1427878 – CBroe Nov 03 '22 at 12:52
  • Hmm, that one creates new options - but it's possible to inject it as metadata into existing options instead, or? – Dannie Nov 03 '22 at 12:58
  • You said this was about ordering the options, so at what point would that require any additional "meta data"? – CBroe Nov 03 '22 at 13:35
  • The link you referred to was a post about creating new options within the selection - Im not sure how to incorporate that information into the problem Im having! – Dannie Nov 03 '22 at 13:38
  • The important part in there is the appending of the options to the select field. Whether you create new options, or use your already existing ones, doesn't really make a difference. – CBroe Nov 03 '22 at 13:40
  • So Ill need to append 42-44 after 41 I reckon? I'm very lost in this by now sadly, a bit out of my JS scope – Dannie Nov 03 '22 at 13:49
  • You sort your options first, and then you loop over that sorted collection, and append them one by one. After clearing the existing options first. – CBroe Nov 03 '22 at 14:17

0 Answers0