Ordinare option di una select

[otto9due]

Sto provando ad ordinare una select all'interno della quale ho dei valori "disabled" che vorrei fossero ordinati come ultimi.
Ho fatto una cosa del genere, che a livello di principio sembra logica, ma non sortisce alcun effetto.. Sbaglio qualcosa? Avete altre idee per farlo?
Grazie in anticipo.

 <select name="airport" id="sortbydisabled">
        <option value="" selected=""></option>
        <option value="ACE" disabled="" hidden="">ACE Lanzarote Airport</option>
        <option value="AHO" disabled="" hidden="">AHO Aeroporto di Alghero</option>
        <option value="BGY">BGY Aeroporto di Milano Bergamo-Il Caravaggio</option>
        <option value="BLQ">BLQ Aeroporto di Bologna-Guglielmo Marconi</option>
        <option value="BRI">BRI Aeroporto di Bari-Karol Wojtyła</option>
        <option value="CAG" disabled="" hidden="">CAG Aeroporto di Cagliari Elmas-Mario Mameli</option>
        <option value="CAI" disabled="" hidden="">CAI Cairo International Airport</option>
        <option value="CIA" disabled="" hidden="">CIA Aeroporto di Roma Ciampino-G.B. Pastine</option>
        <option value="CTA" disabled="" hidden="">CTA Aeroporto di Catania Fontanarossa-Vincenzo Bellini</option>
        <option value="FCO">FCO Aeroporto di Roma Fiumicino-Leonardo Da Vinci</option>
        <option value="FLR" disabled="" hidden="">FLR Aeroporto di Firenze Peretola-Amerigo Vespucci</option>
        <option value="FNC" disabled="" hidden="">FNC Madeira Airport</option>
        <option value="IST" disabled="" hidden="">IST Istanbul Airport</option>
        <option value="KUL" disabled="" hidden="">KUL Kuala Lumpur International Airport</option>
        <option value="LIN" disabled="" hidden="">LIN Milano Linate Airport</option>
        <option value="MLE" disabled="" hidden="">MLE Malé International Airport</option>
        <option value="MXP">MXP Aeroporto di Milano Malpensa</option>
        <option value="NAP">NAP Aeroporto di Napoli - Capodichino</option>
        <option value="OLB" disabled="" hidden="">OLB Aeroporto di Olbia Costa Smeralda</option>
        <option value="PMO" disabled="" hidden="">PMO Aeroporto di Palermo Punta Raisi-Falcone e Borsellino</option>
        <option value="PSA" disabled="" hidden="">PSA Pisa International Airport</option>
        <option value="PXO" disabled="" hidden="">PXO Porto Santo Airport</option>
        <option value="RMF" disabled="" hidden="">RMF Marsa Alam International Airport</option>
        <option value="SAW" disabled="" hidden="">SAW Sabiha Gökçen International Airport</option>
        <option value="SSH" disabled="" hidden="">SSH Sharm El Sheikh International Airport</option>
        <option value="SUF" disabled="" hidden="">SUF Lamezia Terme Airport</option>
        <option value="TFS" disabled="" hidden="">TFS Tenerife South Airport</option>
        <option value="TRN" disabled="" hidden="">TRN Aeroporto di Torino Caselle-Sandro Pertini</option>
        <option value="TSF" disabled="" hidden="">TSF Treviso-Sant'Angelo Airport</option>
        <option value="VCE">VCE Aeroporto di Venezia-Marco Polo</option>
        <option value="VRN">VRN Aeroporto di Verona-Valerio Catullo</option>
        <option value="ZNZ" disabled="" hidden="">ZNZ Abeid Amani Karume International Airport</option>
    </select>
    <script>
        let selectList = document.getElementById('sortbydisabled');

        for (el of selectList) {
            if (el.disabled)
                selectList.insertAdjacentElement('afterend', el);
        }

    </script>

Ho provato anche con appendChild() o transformando prima selectlist in array ma nulla. Stesso risultato.

 

[WmbertSea]

Ciao, può andare bene appendChild(). Non so dirti esattamente perché non funziona ma penso che il problema sia nell'uso del ciclo "for of" applicato direttamente sull'elemento <select> che, essendo un elemento live-dom, suppongo vada ad ingarbugliare il ciclo mentre lo manipoli.

Prova ad "estrarre" un nodeList delle option, quindi esegui il ciclo su questo.
Una cosa del genere:

const selectList = document.getElementById('sortbydisabled');
const options = selectList.querySelectorAll('option');
options.forEach(el => {
    if (el.disabled) selectList.appendChild(el);
});

Non mi è comunque chiaro il fatto che le option abbiano sia l'attributo disabled sia hidden. Di fatto quelle option non saranno visibili, per cui mi chiedo per quale motivo ti interessa ordinare tali elementi se poi non saranno comunque visibili all'utente.

 

[otto9due]

Non mi è comunque chiaro il fatto che le option abbiano sia l'attributo disabled sia hidden. Di fatto quelle option non saranno visibili, per cui mi chiedo per quale motivo ti interessa ordinare tali elementi se poi non saranno comunque visibili all'uten

Pensavo la stessa cosa anche io e inizialmente lo script inseriva addirittura un display: none. Poi mi sono accorto che ne il display ne l'hidden sulle options vengono lette dagli iphone che li visualizza sempre e comunque. Per questo motivo, per forza di cose, ho dovuto aggiungere anche disabled.

Grazie per il suggerimento, faccio dei test e ti dico. A presto, un saluto a tutti.

 

[otto9due]

Grazie. Funziona alla grande ti ringrazio per l'intervento.
Avevo provato con un foreach anche io ma continuavo a testare il ciclo su una HTMLCollection. Non sapevo che si potesse fare un forech su un nodeList.
Grazie e a presto

 

[WmbertSea]

Benissimo, sì, potrei sbagliarmi ma penso che il problema fosse proprio nella differenza dei due oggetti: HTMLCollection che è live-DOM e NodeList che è static-DOM.

Entrambi sono iterabili ma, rispetto allo "storico" HTMLCollection, NodeList è ben più recente ed è provvisto di un'interfaccia più attuale, perciò possiede un suo proprio metodo forEach() (tecnicamente uguale all'omonimo metodo dell'oggetto Array).

Per usare forEach() con un HTMLCollection è necessario convertirlo in qualche modo in Array.

Buon proseguimento

 

[otto9due]

Infatti avevo provato a fare proprio questo con Array.from() ma non va ugualmente. Una buona occasione per approfondire ulteriormente l'argomento.
Grazie