中文select按照字母a-z排序

<select>
    <option value="65">超人总动员</option>
    <option value="64">寻梦环游记</option>
    <option value="63">键盘事件</option>
    <option value="62">所有选项</option>
    <option value="61">无背景</option>
    <option value="60">鼠标点击</option>
    <option value="59">绑定鼠标</option>
    <option value="58">正义联盟</option>
    <option value="57">空白</option>
    <option value="56">菜单</option>
    <option value="55">收起</option>
    <option value="54">方向键</option>
    <option value="53">按下向上</option>
    <option value="52">加勒比海盗</option>
    <option value="51">阻止事件</option>
    <option value="50">网站首页</option>
    <option value="49">进击的巨人</option>
    <option value="48">最后的守护者</option>
    <option value="47">美女与野兽</option>
    <option value="46">恐龙战队</option>
    <option value="45">耻辱</option>
    <option value="44">尼尔:机械纪元</option>
    <option value="43">地平线:黎明时分</option>
    <option value="42">哈利·波特</option>
    <option value="41">睡美人</option>
    <option value="40">西部世界</option>
    <option value="39">蜘蛛侠</option>
    <option value="38">雷神</option>
    <option value="37">巫师</option>
    <option value="36">古墓丽影</option>
    <option value="35">海洋奇缘</option>
    <option value="33">神奇动物在哪里</option>
    <option value="32">最终幻想</option>
    <option value="31">看门狗</option>
    <option value="30">神秘海域</option>
    <option value="29">神盾局特工</option>
    <option value="28">精灵宝可梦GO</option>
    <option value="27">超能敢死队</option>
    <option value="26">辐射4</option>
    <option value="25">守望先锋</option>
    <option value="24">明日传奇</option>
    <option value="21">神奇女侠</option>
    <option value="20">疯狂动物城</option>
    <option value="16">权力的游戏</option>
    <option value="15">超胆侠</option>
    <option value="14">鬼泣</option>
    <option value="13">破产姐妹</option>
    <option value="12">蚁人</option>
    <option value="11">美国队长</option>
    <option value="10">饥饿游戏</option>
    <option value="9">闪电侠</option>
    <option value="8">绿箭侠</option>
    <option value="7">X战警</option>
    <option value="6">蝙蝠侠</option>
    <option value="5">超人</option>
    <option value="4">复仇者联盟</option>
    <option value="2">星球大战</option>
    <option value="1">黑豹</option>
</select>
<script src="jquery-3.2.1.js"></script>
<script src="pinyin.js"></script>
<script>
 
    $("select option").each(function(){
        var iNow = $(this).text();
        $(this).attr("text",pinyin.getFullChars(iNow).toLowerCase());//汉字换拼音
    })
   
    var len = $("select option").length;
    var arr = [];
    for(var i=0;i<len;i++){
        var param = {
            'text':$("select option").eq(i).text(),
            'val':$("select option").eq(i).val(),
            'pinyin':$("select option").eq(i).attr("text")
        }
        arr.push(param);
        }
    function compare(pName) { //根据对象的属性进行排序
        return function(obj1, obj2) { 
            var val1 = obj1[pName];
            var val2 = obj2[pName];
            if (val2 < val1) { 
                return 1; 
                } else if (val2> val1) {
                return -1; 
                } else { 
                return 0; 
                } 
            } 
        }
    arr.sort(compare("pinyin"));
    $("select").empty();
    addMin();
    function addMin(){
            for (var i = 1; i < arr.length; i++) {
            var option =  new Option(arr[i], arr[i]);
    $("select").append("<option value="+arr[i].val+">"+arr[i].text+"</option>")}
    }


猜你喜欢

转载自blog.csdn.net/qq_25236657/article/details/80176466
今日推荐