[メモ]easyselectbox.js[覚書]

おはこんちは!

今回は、jqueryのプラグインで上手く動かないかったので、多少修正したのをメモしておきます。

症状:onClickでクリックのイベントが返ってくるが、一度選んだoptionのvalueをかえさなくなるバグ。
初期値(element.easySelectBox(‘select’, val, true);を使用し初期値をセット)のままポストすると、値が入っていないバグ
細かいところでは、selectタグの方でoptionにselectedを設定すると、初期値の文字色がグレー表示になる。※こちらは修正していません。

バージョン Easy Select Box 1.0.7

該当の修正箇所 _click関数

function _click(e) {
    var easySelect = $(this);//$(this) refers to easySelect element
    var easySelectData = easySelect.data('easySelectData');
    var selectObj = easySelectData.selectObj;
    var displayer = easySelectData.displayer;
    var dropdown = easySelectData.dropdown;
    var options = easySelectData.options;
    
    //alert($(e.target));
    if($(e.target).get(0)==displayer.get(0) || $(e.target).get(0)==easySelect.get(0)){
        if(dropdown.is(':visible')){
            _close(dropdown, options.speed);
        } else {
            _open(dropdown, options.speed);
        }
    } else if($(e.target).is('.'+options.classNames.item)){//esb item is clicked
        var index = dropdown.find('.'+options.classNames.item).index($(e.target));
        _updateSelect(selectObj, index);
        if(options.onClick!=null){
            // 修正
            //options.onClick.call(this, {'value':selectObj.val(), 'text':selectObj.find('option').eq(index).html()});
            options.onClick.call(this, {'value':selectObj.find('option').eq(index).attr('value'), 'text':selectObj.find('option').eq(index).html()});
        }
    } else if($('.'+options.classNames.item).has($(e.target)).length>0){//cufon text fix. Will also detect if a descendant of esb item was clicked
        var index = dropdown.find('.'+options.classNames.item).index($(e.target).parents('.'+options.classNames.item));
        _updateSelect(selectObj, index);
        if(options.onClick!=null){
            // 修正
            //options.onClick.call(this, {'value':selectObj.val(), 'text':selectObj.find('option').eq(index).html()});
            options.onClick.call(this, {'value':selectObj.find('option').eq(index).attr('value'), 'text':selectObj.find('option').eq(index).html()});
        }
    }
    e.stopPropagation();
}

該当の修正箇所 _updateSelect関数

function _updateSelect(selectObj, index){
    var easySelect = selectObj.data('easySelect');
    var easySelectData = easySelect.data('easySelectData');
    var displayer = easySelectData.displayer;
    var dropdown = easySelectData.dropdown;
    var options = easySelectData.options;
    //update easySelect
    var selectedOption = selectObj.find('option').eq(index);
    displayer.html(selectedOption.html());
    displayer.css('color','#2c2e31');
    //update select
    selectObj.find('option').removeAttr('selected');
    // 修正
    //selectedOption.attr('selected','selected');
    selectedOption.prop({selected:true});
    if(dropdown.is(':visible')){
        _close(dropdown, options.speed);
    }
}

このプラグインを初めて使って思ったことは、プログラムには向いていない、プラグインだと思われます。
メンテナンスも大分されていないみたいですし・・・
謎の挙動が多すぎでしんどい・・・

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です