おはこんちは!
今回は、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); } }
このプラグインを初めて使って思ったことは、プログラムには向いていない、プラグインだと思われます。
メンテナンスも大分されていないみたいですし・・・
謎の挙動が多すぎでしんどい・・・