{"id":557,"date":"2018-03-06T02:02:00","date_gmt":"2018-03-05T17:02:00","guid":{"rendered":"http:\/\/blog.tkouen.mydns.jp\/wordpress\/?p=557"},"modified":"2018-07-19T17:16:55","modified_gmt":"2018-07-19T08:16:55","slug":"%e3%83%a1%e3%83%a2easyselectbox-js%e8%a6%9a%e6%9b%b8","status":"publish","type":"post","link":"https:\/\/devlog.nb3.jp\/wordpress\/557","title":{"rendered":"[\u30e1\u30e2]easyselectbox.js[\u899a\u66f8]"},"content":{"rendered":"

\"\"\u304a\u306f\u3053\u3093\u3061\u306f\uff01<\/p>\n

\u4eca\u56de\u306f\u3001jquery\u306e\u30d7\u30e9\u30b0\u30a4\u30f3\u3067\u4e0a\u624b\u304f\u52d5\u304b\u306a\u3044\u304b\u3063\u305f\u306e\u3067\u3001\u591a\u5c11\u4fee\u6b63\u3057\u305f\u306e\u3092\u30e1\u30e2\u3057\u3066\u304a\u304d\u307e\u3059\u3002<\/p>\n

\u75c7\u72b6\uff1aonClick\u3067\u30af\u30ea\u30c3\u30af\u306e\u30a4\u30d9\u30f3\u30c8\u304c\u8fd4\u3063\u3066\u304f\u308b\u304c\u3001\u4e00\u5ea6\u9078\u3093\u3060option\u306evalue\u3092\u304b\u3048\u3055\u306a\u304f\u306a\u308b\u30d0\u30b0\u3002
\n\u521d\u671f\u5024\uff08element.easySelectBox(\u2018select\u2019, val<\/em>, true);\u3092\u4f7f\u7528\u3057\u521d\u671f\u5024\u3092\u30bb\u30c3\u30c8\uff09\u306e\u307e\u307e\u30dd\u30b9\u30c8\u3059\u308b\u3068\u3001\u5024\u304c\u5165\u3063\u3066\u3044\u306a\u3044\u30d0\u30b0
\n\u7d30\u304b\u3044\u3068\u3053\u308d\u3067\u306f\u3001select\u30bf\u30b0\u306e\u65b9\u3067option\u306bselected\u3092\u8a2d\u5b9a\u3059\u308b\u3068\u3001\u521d\u671f\u5024\u306e\u6587\u5b57\u8272\u304c\u30b0\u30ec\u30fc\u8868\u793a\u306b\u306a\u308b\u3002\u203b\u3053\u3061\u3089\u306f\u4fee\u6b63\u3057\u3066\u3044\u307e\u305b\u3093\u3002<\/p>\n

\u30d0\u30fc\u30b8\u30e7\u30f3 Easy Select Box 1.0.7<\/p>\n

\u8a72\u5f53\u306e\u4fee\u6b63\u7b87\u6240 _click\u95a2\u6570<\/p>\n

function _click(e) {\r\n    var easySelect = $(this);\/\/$(this) refers to easySelect element\r\n    var easySelectData = easySelect.data('easySelectData');\r\n    var selectObj = easySelectData.selectObj;\r\n    var displayer = easySelectData.displayer;\r\n    var dropdown = easySelectData.dropdown;\r\n    var options = easySelectData.options;\r\n    \r\n    \/\/alert($(e.target));\r\n    if($(e.target).get(0)==displayer.get(0) || $(e.target).get(0)==easySelect.get(0)){\r\n        if(dropdown.is(':visible')){\r\n            _close(dropdown, options.speed);\r\n        } else {\r\n            _open(dropdown, options.speed);\r\n        }\r\n    } else if($(e.target).is('.'+options.classNames.item)){\/\/esb item is clicked\r\n        var index = dropdown.find('.'+options.classNames.item).index($(e.target));\r\n        _updateSelect(selectObj, index);\r\n        if(options.onClick!=null){\r\n            \/\/ \u4fee\u6b63\r\n            \/\/options.onClick.call(this, {'value':selectObj.val(), 'text':selectObj.find('option').eq(index).html()});\r\n            options.onClick.call(this, {'value':selectObj.find('option').eq(index).attr('value'), 'text':selectObj.find('option').eq(index).html()});\r\n        }\r\n    } else if($('.'+options.classNames.item).has($(e.target)).length>0){\/\/cufon text fix. Will also detect if a descendant of esb item was clicked\r\n        var index = dropdown.find('.'+options.classNames.item).index($(e.target).parents('.'+options.classNames.item));\r\n        _updateSelect(selectObj, index);\r\n        if(options.onClick!=null){\r\n            \/\/ \u4fee\u6b63\r\n            \/\/options.onClick.call(this, {'value':selectObj.val(), 'text':selectObj.find('option').eq(index).html()});\r\n            options.onClick.call(this, {'value':selectObj.find('option').eq(index).attr('value'), 'text':selectObj.find('option').eq(index).html()});\r\n        }\r\n    }\r\n    e.stopPropagation();\r\n}\r\n<\/pre>\n
\u8a72\u5f53\u306e\u4fee\u6b63\u7b87\u6240 _updateSelect\u95a2\u6570<\/p>\n
function _updateSelect(selectObj, index){\r\n    var easySelect = selectObj.data('easySelect');\r\n    var easySelectData = easySelect.data('easySelectData');\r\n    var displayer = easySelectData.displayer;\r\n    var dropdown = easySelectData.dropdown;\r\n    var options = easySelectData.options;\r\n    \/\/update easySelect\r\n    var selectedOption = selectObj.find('option').eq(index);\r\n    displayer.html(selectedOption.html());\r\n    displayer.css('color','#2c2e31');\r\n    \/\/update select\r\n    selectObj.find('option').removeAttr('selected');\r\n    \/\/ \u4fee\u6b63\r\n    \/\/selectedOption.attr('selected','selected');\r\n    selectedOption.prop({selected:true});\r\n    if(dropdown.is(':visible')){\r\n        _close(dropdown, options.speed);\r\n    }\r\n}\r\n<\/pre>\n
\u3053\u306e\u30d7\u30e9\u30b0\u30a4\u30f3\u3092\u521d\u3081\u3066\u4f7f\u3063\u3066\u601d\u3063\u305f\u3053\u3068\u306f\u3001\u30d7\u30ed\u30b0\u30e9\u30e0\u306b\u306f\u5411\u3044\u3066\u3044\u306a\u3044\u3001\u30d7\u30e9\u30b0\u30a4\u30f3\u3060\u3068\u601d\u308f\u308c\u307e\u3059\u3002
\n\u30e1\u30f3\u30c6\u30ca\u30f3\u30b9\u3082\u5927\u5206\u3055\u308c\u3066\u3044\u306a\u3044\u307f\u305f\u3044\u3067\u3059\u3057\u30fb\u30fb\u30fb
\n\u8b0e\u306e\u6319\u52d5\u304c\u591a\u3059\u304e\u3067\u3057\u3093\u3069\u3044\u30fb\u30fb\u30fb<\/p>\n","protected":false},"excerpt":{"rendered":"
\u304a\u306f\u3053\u3093\u3061\u306f\uff01 \u4eca\u56de\u306f\u3001jquery\u306e\u30d7\u30e9\u30b0\u30a4\u30f3\u3067\u4e0a\u624b\u304f\u52d5\u304b\u306a\u3044\u304b\u3063\u305f\u306e\u3067\u3001\u591a\u5c11\u4fee\u6b63\u3057\u305f\u306e\u3092\u30e1\u30e2\u3057\u3066\u304a\u304d\u307e\u3059\u3002 \u75c7\u72b6\uff1aonClick\u3067\u30af\u30ea\u30c3\u30af\u306e\u30a4\u30d9\u30f3\u30c8\u304c\u8fd4\u3063\u3066\u304f\u308b\u304c\u3001\u4e00\u5ea6\u9078\u3093\u3060option\u306evalue\u3092\u304b\u3048\u3055\u306a\u304f\u306a\u308b\u30d0 … \u7d9a\u304d\u3092\u8aad\u3080 →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":560,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10,122],"tags":[140,141,139,142],"class_list":["post-557","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-jquery","tag-easyselectbox","tag-141","tag-139","tag-142"],"_links":{"self":[{"href":"https:\/\/devlog.nb3.jp\/wordpress\/wp-json\/wp\/v2\/posts\/557","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devlog.nb3.jp\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devlog.nb3.jp\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devlog.nb3.jp\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/devlog.nb3.jp\/wordpress\/wp-json\/wp\/v2\/comments?post=557"}],"version-history":[{"count":1,"href":"https:\/\/devlog.nb3.jp\/wordpress\/wp-json\/wp\/v2\/posts\/557\/revisions"}],"predecessor-version":[{"id":634,"href":"https:\/\/devlog.nb3.jp\/wordpress\/wp-json\/wp\/v2\/posts\/557\/revisions\/634"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devlog.nb3.jp\/wordpress\/wp-json\/wp\/v2\/media\/560"}],"wp:attachment":[{"href":"https:\/\/devlog.nb3.jp\/wordpress\/wp-json\/wp\/v2\/media?parent=557"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devlog.nb3.jp\/wordpress\/wp-json\/wp\/v2\/categories?post=557"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devlog.nb3.jp\/wordpress\/wp-json\/wp\/v2\/tags?post=557"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}