0
votes

Triez les valeurs d'option ASC

Je ne peux pas comprendre comment trier correctement mes valeurs d'option de sélection. Mon élément Select renvoie les valeurs de texte comme suit:

$(function() {
    var options = $('#dessertservingID option');
    options.sort(function(a, b) {
    if (a.value > b.value) {
        return 1;
    }
    else if (a.value < b.value) {
    return -1;
    }
    else {
    return 0;
    }
})

$("#dessertservingID").empty().append(options);

// Vive la France!

$('#dessertservingID option[value=""]').insertAfter($('#dessertservingID option:first'));

});


0 commentaires

4 Réponses :


2
votes

Le problème est que vous comparez les propriétés code> valeur code> comme chaînes. Conversion en entiers en utilisant parseint () code> d'abord.

Notez également que vous pouvez simplifier votre Sort () code> logique en soustrayant simplement une valeur de l'autre: P >

p>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" id="dessertservingID" data-value="10" name="dessertservingID" required="">
  <option value="">** Please choose</option>
  <option value="7">10-12 pers.</option>
  <option value="8">12-14 pers.</option>
  <option value="9">14-16 pers.</option>
  <option selected="" value="10">16-18 pers.</option>
  <option value="1">2-3 pers.</option>
  <option value="11">20-24 pers.</option>
  <option value="2">3-4 pers.</option>
  <option value="3">4-6 pers.</option>
  <option value="4">5-7 pers.</option>
  <option value="5">6-8 pers.</option>
  <option value="6">8-10 pers.</option>
</select>


0 commentaires

0
votes

Vous pouvez utiliser parseint Code> pour obtenir la valeur numérique de la chaîne. Il essaiera d'obtenir toutes les valeurs numériques du début em> de la chaîne jusqu'à ce qu'elle rencontre une valeur non numérique. Dans votre cas, c'est ce que vous voulez - vous obtiendrez 20 code> de "20-24" code>:

p>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" id="dessertservingID" data-value="10" name="dessertservingID" required="">
  <option value="">** Please choose</option>
  <option value="7">10-12 pers.</option>
  <option value="8">12-14 pers.</option>
  <option value="9">14-16 pers.</option>
  <option selected="" value="10">16-18 pers.</option>
  <option value="1">2-3 pers.</option>
  <option value="11">20-24 pers.</option>
  <option value="2">3-4 pers.</option>
  <option value="3">4-6 pers.</option>
  <option value="4">5-7 pers.</option>
  <option value="5">6-8 pers.</option>
  <option value="6">8-10 pers.</option>
</select>


0 commentaires

0
votes

Essayez d'analyser l'option.Value dans un entier à l'aide d'une parseint avant de comparer les valeurs suivantes:

$(function() {
    var options = $('#dessertservingID option');
    options.sort(function(a, b) {

    let aValue = parseInt(a.value);
    let bValue = parseInt(b.value);

    aValue = isNaN(aValue) ? -1 : aValue;
    bValue = isNaN(bValue) ? -1 : bValue;

    return aValue - bValue;
})


0 commentaires

0
votes

Utilisation:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" id="dessertservingID" data-value="10" name="dessertservingID" required="">
  <option value="">** Please choose</option>
  <option value="7">10-12 pers.</option>
  <option value="8">12-14 pers.</option>
  <option value="9">14-16 pers.</option>
  <option selected="" value="10">16-18 pers.</option>
  <option value="1">2-3 pers.</option>
  <option value="11">20-24 pers.</option>
  <option value="2">3-4 pers.</option>
  <option value="3">4-6 pers.</option>
  <option value="4">5-7 pers.</option>
  <option value="5">6-8 pers.</option>
  <option value="6">8-10 pers.</option>
</select>


0 commentaires