Reversing Order of Select List in Javascript & HTML

Question

// Generate and append Base array from DB based on ID selected
function BasePopulation(id) {

    // Use previous query
    var array = dropdownRequest.responseJSON[id];
    
    // Create Base dropdown
    $("#inputGroup")
        .append(
            '<div class="col-12 col-sm-12 col-md-8 col-lg-8 col-xl-8 removable">' +
                '<select id="BaseSelect" name="BaseSelect" class="selectpicker" data-size="10" data-width="auto" data-container="body" title="Base">' +
                    '<option>Base</option>' +
                    '<!-- Populated in .js -->' +
                '</select>' +
            '</div>'
        );

    // Populate Base dropdown
    
    $.each(array, function(index, base) {
        // Reformat JD Base
        var base_value = BaseToValue(base);
    
        $("#BaseSelect")
            .append($("<option class='removable'></option>")
            .attr("value", base_value)
            .text(base));
    });
    
    $("#BaseSelect").selectpicker("refresh");
    
}

I'm trying to reverse the order of the dropdown list in HTML/Javascript, but I can't find a reverse function. Is there a function to do this, or do I have to do this manually?

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… is this what you are looking for? — Kajbo
– Kajbo, Commented Nov 30, 2020 at 15:12
In the each loop, If you use prepend instead of append, the list will be reversed. — Louys Patrice Bessette
– Louys Patrice Bessette, Commented Nov 30, 2020 at 15:15
@Kajbo the console says the reverse function doesn't exist when I tried adding it after .text(base) — SecureEntrepeneur
– SecureEntrepeneur, Commented Nov 30, 2020 at 15:20
Using .reverse() would work too, but you have to apply it on the array before looping with each. — Louys Patrice Bessette
– Louys Patrice Bessette, Commented Nov 30, 2020 at 15:28

Louys Patrice Bessette · Accepted Answer · 2020-11-30 15:34:53Z

2

There are two possible ways for you to populate the dropdown reversly.

1: with jQuery .prepend() method instead of .append()

$.each(array, function(index, base) {
    // Reformat JD Base
    var base_value = BaseToValue(base);

    $("#BaseSelect")
        .prepend($("<option class='removable'></option>")  // Using prepend
        .attr("value", base_value)
        .text(base));
});

2: with the JS .reverse() method applied on the array

array.reverse()

$.each(array, function(index, base) {
  ...

Read the documentation for more details ;)

answered Nov 30, 2020 at 15:34

Louys Patrice Bessette

34k7 gold badges40 silver badges69 bronze badges

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

Comments

vazsonyidl · Accepted Answer · 2020-11-30 15:27:46Z

0

If you reverse this var array = dropdownRequest.responseJSON[id]; array with the .reverse function?

answered Nov 30, 2020 at 15:27

vazsonyidl

4814 silver badges7 bronze badges

Collectives™ on Stack Overflow

Reversing Order of Select List in Javascript & HTML

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related