发表新帖
发表新帖

sort select menu alphabetically?

前端 未结
关注
4 1206
Happy的楠姐
Happy的楠姐 2021-01-12 00:46

I\'ve got the following select menu (jsFiddle):
提交评论
  •  加载中...
  • 难免孤独
    2021-01-12 01:14

    I would start by giving a class name to all of the entries I want to sort, and giving and ID to the select:

     <select id="sortableCars">
   <option value="volvo">Cars</option>
   <option class="sortMe" value="saab">------------</option>
   <option class="sortMe" value="volvo">Volvo</option>
   <option class="sortMe" value="saab">Saab</option>
   <option class="sortMe" value="mercedes">Mercedes</option>
   <option class="sortMe" value="audi">Audi</option>
 </select>

    as for the javascript

     var mylist = $('#sortableCars');
 var listitems = mylist.children('option.sortMe').get();
 listitems.sort(function(a, b) {
    var compA = $(a).text().toUpperCase();
    var compB = $(b).text().toUpperCase();
    return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
 })
 $.each(listitems, function(idx, itm) { mylist.append(itm); });
    0 讨论(0)
  • Happy的楠姐
    2021-01-12 01:24

    Being a purist, I would say that at no point was jQuery specifically mentioned or asked for, it may not be in use in this project for one reason or another. Here's an example using pure javascript.

    function sortlist(){

 var cl = document.getElementById('carlist');
 var clTexts = new Array();

 for(i = 2; i < cl.length; i++){
    clTexts[i-2] =
        cl.options[i].text.toUpperCase() + "," +
        cl.options[i].text + "," +
        cl.options[i].value + "," +
        cl.options[i].selected;
 }

 clTexts.sort();

 for(i = 2; i < cl.length; i++){
    var parts = clTexts[i-2].split(',');

    cl.options[i].text = parts[1];
    cl.options[i].value = parts[2];
    if(parts[3] == "true"){
        cl.options[i].selected = true;
    }else{
       cl.options[i].selected = false;
    }
 }
}

sortlist();

    http://jsfiddle.net/GAYvL/7/

    Updated to be case neutral.

    0 讨论(0)
  • 失恋的感觉
    2021-01-12 01:24

    This is just a more generic answser based on @Jeff Parker's one!

    function sortSelect(select, startAt) {
    if(typeof startAt === 'undefined') {
        startAt = 0;
    }

    var texts = [];

    for(var i = startAt; i < select.length; i++) {
        texts[i] = [
            select.options[i].text.toUpperCase(),
            select.options[i].text,
            select.options[i].value
        ].join('|');
    }

    texts.sort();

    texts.forEach(function(text, index) {
        var parts = text.split('|');

        select.options[startAt + index].text = parts[1];
        select.options[startAt + index].value = parts[2];
    });
}

    I have also created a fiddle; http://jsfiddle.net/4u86B/1/

    0 讨论(0)
    •  看不清?
    提交回复
    热议问题