使用JS/Jquery對列表中的國家進行排序

Question

您好，我需要列出要排序的國家/地區列表，以便法國始終位於列表的頂部。

以下是該列表的輸入順序。

<select id="countriesList" name="countriesListName"> 
    <option value="US">USA</option> 
    <option value="DE">Germany</option> 
    <option value="FR">France</option> 
    <option value="DM">Denmark</option> 
    <option value="">Choose Countries</option> 
</select> 

Answer 1

1. 我的選項
2. 排序我謹法國頂端
3. 我動「選擇Coumtries」頂部（也許不是必要的，因爲它的值是空的）
4. 我選擇「選擇Coumtries」 //你可以選擇FR這裏

$(function() { 
 
    var $list = $("#countriesList"), $opts = $("option",$list); 
 
    $opts.sort(function(a, b) { 
 
    a = $(a).val(); 
 
    b = $(b).val(); 
 
    if (a > b) return 1; 
 
    if (a < b) return -1; 
 
    return 0; 
 
    }); 
 
    $list.html($opts); 
 
    // insertBefore or prepend 
 
    $('option[value = "FR"]', $list).insertBefore($("option", $list).first()); 
 
    $('option[value = ""]', $list).insertBefore($("option", $list).first()); 
 
    $list.get(0).selectedIndex=0; // or 1 to select France 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<select id="countriesList" name="countriesListName"> 
 
    <option value="US">USA</option> 
 
    <option value="DE">Germany</option> 
 
    <option value="FR">France</option> 
 
    <option value="DM">Denmark</option> 
 
    <option value="">Choose Countries</option> 
 
</select>

Answer 2

完整的解決方案：

$(function() { 
 

 
    var options = $('#countriesList option'); 
 

 
    options.sort(function(a, b) { 
 

 
    if (a.value > b.value) { 
 

 
     return 1; 
 
    } 
 
    else if (a.value < b.value) { 
 

 
     return -1; 
 
    } 
 
    else { 
 

 
     return 0; 
 
    } 
 
    }) 
 

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

 
    // Vive la France! 
 

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

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="countriesList" name="countriesListName"> 
 
    <option value="US">USA</option> 
 
    <option value="DE">Germany</option> 
 
    <option value="AZ">Azerbaijan</option> 
 
    <option value="FR">France</option> 
 
    <option value="DM">Denmark</option> 
 
    <option value="">Choose Countries</option> 
 
</select>

前：

後：

Demo at sfiddle.net

Answer 3

function myFunction(country) { 
    var select = document.getElementById("selectFrance"); 
    var opts = select.options.length; 
    if ((select.options[1].value !== "FR")){ 
     for (var i=0; i<opts; i++){ 
      if (select.options[i].value == "FR"){ 
       select.insertBefore(select[i],select[1]); 
       break; 
      } 
     } 
    } 
}