JQueryでSelectタグの内容を直近で選択した順に並び替える

高瀬 裕介 566views 更新:2014年3月6日
($(function(){
    //履歴の読み出し
    var dataText=GetCookie('select-history');
    if (!dataText) {
        dataText = '[]';
    }                
    $.selectHistory = JSON.parse(dataText);                
    for(var _key in $.selectHistory){
        var _value = $.selectHistory[_key];
        var matched = $("select#selectField option[value='" + _value + "']");
        if (matched){                        
            matched.prependTo("select#selectField");
        }                    
    }
    $("select#selectField option:first").attr('selected', 'selected');
}));

//Cookieから読み込み
function GetCookie(name) {
    var result = null;
    var cookieName = name + '=';
    var allcookies = document.cookie;
    var position = allcookies.indexOf(cookieName);
    if (position !== -1) {
        var startIndex = position + cookieName.length;
        var endIndex = allcookies.indexOf(';', startIndex);
        if (endIndex === -1){
            endIndex = allcookies.length;
        }
        result = decodeURIComponent(
                allcookies.substring(startIndex, endIndex));
    }
    return result;
}

//Cookieへ書き出し
function SetCookie(name, value) {
    document.cookie = name + '=' + encodeURIComponent( value );
}

//履歴をCookieに保存
function AddHistory(value){
    var _index = $.selectHistory.indexOf(value);
    if(_index >= 0) {
        $.selectHistory.splice(_index, 1);
    }
    $.selectHistory.push(value);
    SetCookie('select-history', JSON.stringify($.selectHistory));
}

function onSubmit(form) {
     AddHistory($('#selectField').val());
}

HTMLは下記のような形です

<form method="POST" onsubmit="onSubmit(this)">
  <select id="selectField" name="selectField">
    <option value="item1">item1</option>
    <option value="item2">item2</option>
    <option value="item3">item3</option>
  </select>
  <input type="submit" value"Submit"/>
</form>

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません