skip to Main Content

I’m able to populate my dropdown list with the values in my database. However, the list is unsorted and hectic due to large values. How can I have this list sorted in alphabetical order when the user clicks on the dropdown? My code is below.

<div class="form-group">
 <label class="control-label">Employee Name</label>
 <select id="uni_name_drpdwn" class="form-control custom-select" name="emid" data-placeholder="Choose a Category" tabindex="1" value="" required>
    
<?php foreach($allemployees as $value): ?>
<option value="<?php echo $value->em_id ?>"><?php echo $value->first_name.' '.$value->last_name ?></option>
<?php endforeach; ?>
</select>
</div>

2

Answers


  1. You can assign an id to the list and in a js file you can select it by id and add sort(). For example:
    
         function ordenarListaDesplegable() {
                var selectElement = document.getElementById("miListaDesplegable");
                var options = selectElement.options;
                
                var arr = [];
                for (var i = 0; i < options.length; i++) {
                  arr.push(options[i].text);
                }
                
                arr.sort();
                
                for (var j = 0; j < arr.length; j++) {
                  options[j].text = arr[j];
                  options[j].value = "valor" + (j + 1);
                }
              }
              var miListaDesplegable = document.getElementById("miListaDesplegable");
              miListaDesplegable.addEventListener("click", ordenarListaDesplegable);
    
    Login or Signup to reply.
  2. I’m not sure if I follow correctly, but I’ve set up an unsorted multi-dimensional array similar to yours:

    $allEmployees = [
    1 => [
        'id' => 1,
        'first_name' => 'Jane',
        'last_name' => 'Smith',
        'salary' => 18000
        ],
    2 => [
        'id' => 2,
        'first_name' => 'Micheal',
        'last_name' => 'Scott',
        'salary' => 21000
        ],
    3 => [
        'id' => 3,
        'first_name' => 'Kelvin',
        'last_name' => 'Malone',
        'salary' => 16500
        ]
    ];
    

    and used a print_r() function and it gave me this:

    Array(
    [1] => Array
        (
            [id] => 1
            [first_name] => Jane
            [last_name] => Smith
            [salary] => 18000
        )
    
    [2] => Array
        (
            [id] => 2
            [first_name] => Micheal
            [last_name] => Scott
            [salary] => 21000
        )
    
    [3] => Array
        (
            [id] => 3
            [first_name] => Kelvin
            [last_name] => Malone
            [salary] => 16500
        )
    
    )
    

    Then to sort it, I used this method:

    usort($allEmployees, fn($a, $b) => $a['first_name'] <=> $b['first_name']);
    

    That’s a usort() and it sorts each array by first_name index.

    Below is what the print_r() function returned:

    Array (
    [0] => Array
        (
            [id] => 1
            [first_name] => Jane
            [last_name] => Smith
            [salary] => 18000
        )
    
    [1] => Array
        (
            [id] => 3
            [first_name] => Kelvin
            [last_name] => Malone
            [salary] => 16500
        )
    
    [2] => Array
        (
            [id] => 2
            [first_name] => Micheal
            [last_name] => Scott
            [salary] => 21000
        )
    
    )
    

    As you can see, my $allEmployees array variable is sorted and from there you can use it on your foreach loop to create dropdown menu items.

    Note: This seems like something you should do on your database when you are querying your data, e.g: SELECT * FROM EMPS ORDER BY first_name DESC, but if you are looking for a strictly PHP sort, then the usort method using the arrow function should do the trick.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search