{"id":6409,"date":"2024-08-22T11:04:07","date_gmt":"2024-08-22T02:04:07","guid":{"rendered":"https:\/\/taitan916.info\/blog\/?p=6409"},"modified":"2024-05-25T14:20:59","modified_gmt":"2024-05-25T05:20:59","slug":"post-6409","status":"publish","type":"post","link":"https:\/\/taitan916.info\/blog\/archives\/6409","title":{"rendered":"\u30d0\u30cb\u30e9JavaScript\u3067\u30ea\u30c3\u30c1\u306a\u30bb\u30ec\u30af\u30c8\u30e1\u30cb\u30e5\u30fc(\u30d7\u30eb\u30c0\u30a6\u30f3)\u3092\u5b9f\u88c5\u3067\u304d\u308b\u300cChoices.js\u300d\u306e\u5229\u7528\u65b9\u6cd5"},"content":{"rendered":"

\u30b5\u30b8\u30a7\u30b9\u30c8\u3084\u8907\u6570\u9078\u629e\u7b49\u3001\u6a5f\u80fd\u4ed8\u304d\u306e\u30bb\u30ec\u30af\u30c8\u30e1\u30cb\u30e5\u30fc(\u30d7\u30eb\u30c0\u30a6\u30f3)\u3092\u5b9f\u88c5\u3059\u308b\u969b\u3001\u4eca\u307e\u3067\u306fjQuery\u30d7\u30e9\u30b0\u30a4\u30f3\u306e\u300cselect2\u300d<\/a>\u3092\u4f7f\u3063\u3066\u3044\u305f\u304c\u30d0\u30cb\u30e9JavaScript\u3067\u540c\u3058\u3088\u3046\u306a\u6a5f\u80fd\u3092\u5b9f\u88c5\u3057\u305f\u3044\u30b1\u30fc\u30b9\u304c\u3042\u3063\u305f\u3002\u63a2\u3057\u305f\u3068\u3053\u308d\u300cChoices.js\u300d\u304c\u826f\u3055\u305d\u3046\u3002\u4ee5\u4e0b\u306b\u5b9f\u88c5\u65b9\u6cd5\u3092\u30e1\u30e2\u3002<\/p>\n

 <\/p>\n

Choices.js<\/h2>\n

\u516c\u5f0f\u30b5\u30a4\u30c8<\/h3>\n

https:\/\/choices-js.github.io\/Choices\/<\/a><\/p>\n

GitHub<\/h3>\n

https:\/\/github.com\/Choices-js\/Choices<\/a><\/p>\n

CDN<\/h3>\n

CDN\u3067\u4f7f\u3046\u5834\u5408\u306f\u4ee5\u4e0b\u3092\u8a18\u8ff0\u3059\u308b\u3002<\/p>\n

<link rel=\"stylesheet\" href=\"https:\/\/choices-js.github.io\/Choices\/assets\/styles\/base.min.css\">\r\n<link rel=\"stylesheet\" href=\"https:\/\/choices-js.github.io\/Choices\/assets\/styles\/choices.min.css\">\r\n<script src=\"https:\/\/choices-js.github.io\/Choices\/assets\/scripts\/choices.js\"><\/script><\/pre>\n
 <\/p>\n
\u30b5\u30f3\u30d7\u30eb<\/h2>\n
https:\/\/taitan916.info\/sample\/Choices.js\/<\/a><\/p>\n
 <\/p>\n
\u5b9f\u88c5\u65b9\u6cd5<\/h2>\n
\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9<\/h3>\n
<div class=\"section\">\r\n    <div>\u30aa\u30d7\u30b7\u30e7\u30f3\u6307\u5b9a\u306a\u3057<\/div>\r\n    <select class=\"choices_1\">\r\n        <option value=\"\">\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044<\/option>\r\n        <option value=\"1\">\u5927\u30c8\u30ed<\/option>\r\n        <option value=\"2\">\u30de\u30b0\u30ed<\/option>\r\n        <option value=\"3\">\u306d\u304e\u3068\u308d<\/option>\r\n        <option value=\"4\">\u4e2d\u30c8\u30ed<\/option>\r\n        <option value=\"5\">\u30b5\u30fc\u30e2\u30f3<\/option>\r\n    <\/select>\r\n<\/div>\r\n\r\n<div class=\"section\">\r\n    <div>\u8907\u6570\u9078\u629e\u53ef<\/div>\r\n    <select class=\"choices_2\" multiple>\r\n        <option value=\"\">\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044<\/option>\r\n        <option value=\"1\">\u5927\u30c8\u30ed<\/option>\r\n        <option value=\"2\">\u30de\u30b0\u30ed<\/option>\r\n        <option value=\"3\">\u306d\u304e\u3068\u308d<\/option>\r\n        <option value=\"4\">\u4e2d\u30c8\u30ed<\/option>\r\n        <option value=\"5\">\u30b5\u30fc\u30e2\u30f3<\/option>\r\n    <\/select>\r\n<\/div>\r\n\r\n<div class=\"section\">\r\n    <div>\u8907\u6570\u9078\u629e\u53ef&\u30da\u30fc\u30b8\u8868\u793a\u6642\u306b\u30b5\u30fc\u30e2\u30f3\u3092\u9078\u629e\u6e08\u307f<\/div>\r\n    <select class=\"choices_3\" multiple>\r\n        <option value=\"1\">\u5927\u30c8\u30ed<\/option>\r\n        <option value=\"2\">\u30de\u30b0\u30ed<\/option>\r\n        <option value=\"3\">\u306d\u304e\u3068\u308d<\/option>\r\n        <option value=\"4\">\u4e2d\u30c8\u30ed<\/option>\r\n        <option value=\"5\" selected>\u30b5\u30fc\u30e2\u30f3<\/option>\r\n    <\/select>\r\n<\/div>\r\n\r\n<link rel=\"stylesheet\" href=\"https:\/\/choices-js.github.io\/Choices\/assets\/styles\/base.min.css\">\r\n<link rel=\"stylesheet\" href=\"https:\/\/choices-js.github.io\/Choices\/assets\/styles\/choices.min.css\">\r\n<style>\r\nbody{\r\n    background-color: initial;\r\n}\r\n.choices__list--multiple .choices__item,\r\n.choices__list--multiple .choices__item.is-highlighted\r\n{\r\n    background-color: #aaa;\r\n    border: 1px solid #aaa;\r\n    border-radius: 4px;\r\n}\r\n.choices[data-type*=\"select-multiple\"] .choices__button, .choices[data-type*=\"text\"] .choices__button{\r\n    border-left: 1px solid #aaa;\r\n}\r\n.choices__input{\r\n    width: initial !important;\r\n}\r\n<\/style>\r\n<script src=\"https:\/\/choices-js.github.io\/Choices\/assets\/scripts\/choices.js\"><\/script>\r\n<script>\r\nconst option = {\r\n    removeItemButton: true, \/\/\u524a\u9664\u30dc\u30bf\u30f3\u8868\u793a\r\n    maxItemCount: 3, \/\/\u6700\u5927\u9078\u629e\u53ef\u80fd\u6570\r\n    maxItemText: (maxItemCount) => { \/\/\u6700\u5927\u9078\u629e\u53ef\u80fd\u6570\u306b\u9054\u3057\u305f\u5834\u5408\u306e\u30e1\u30c3\u30bb\u30fc\u30b8\r\n        return `\u6700\u5927${maxItemCount}\u3064\u307e\u3067\u9078\u629e\u53ef`;\r\n    },\r\n    itemSelectText: `\u30af\u30ea\u30c3\u30af\u3067\u9078\u629e`,\r\n};\r\nconst choices_1 = new Choices(document.querySelector('.choices_1'), option);\r\nconst choices_2 = new Choices(document.querySelector('.choices_2'), option);\r\nconst choices_3 = new Choices(document.querySelector('.choices_3'), option);\r\n\r\n<\/script><\/pre>\n
\u89e3\u8aac\u7b49<\/h3>\n
base.css\u306b\u3064\u3044\u3066<\/h4>\n
base.css\u306fbody\u306ebackground-color\u7b49\u3001\u30bb\u30ec\u30af\u30c8\u30e1\u30cb\u30e5\u30fc\u4ee5\u5916\u306e\u90e8\u5206\u3082CSS\u304c\u6307\u5b9a\u3055\u308c\u3066\u3044\u308b\u305f\u3081\u3001\u5225\u9014CSS\u3092\u8ffd\u8a18\u3057\u3066\u3044\u304f\u5fc5\u8981\u304c\u3042\u308a\u305d\u3046\u3002\u305d\u306e\u305f\u3081\u30a4\u30f3\u30e9\u30a4\u30f3\u3067\u8272\u3005CSS\u3092\u6307\u5b9a\u3057\u3066\u3044\u308b\u3002<\/p>\n
\u30da\u30fc\u30b8\u8868\u793a\u6642\u306b\u9078\u629e\u6e08\u307f\u306b\u3057\u305f\u3044\u5834\u5408<\/h4>\n
\u9078\u629e\u6e08\u307f\u306b\u3057\u305f\u3044option\u30bf\u30b0\u306b\u5bfe\u3057\u3066selected\u3092\u4ed8\u4e0e\u3059\u308b\u3053\u3068\u3002JavaScript\u5074\u3067\u306e\u6307\u5b9a\u306f\u4e0d\u8981\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
\u30b5\u30b8\u30a7\u30b9\u30c8\u3084\u8907\u6570\u9078\u629e\u7b49\u3001\u6a5f\u80fd\u4ed8\u304d\u306e\u30bb\u30ec\u30af\u30c8\u30e1\u30cb\u30e5\u30fc(\u30d7\u30eb\u30c0\u30a6\u30f3)\u3092\u5b9f\u88c5\u3059\u308b\u969b\u3001\u4eca ... <\/p>\n","protected":false},"author":1,"featured_media":1067,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[4],"tags":[100],"class_list":["post-6409","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-library"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/posts\/6409","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/comments?post=6409"}],"version-history":[{"count":2,"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/posts\/6409\/revisions"}],"predecessor-version":[{"id":6414,"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/posts\/6409\/revisions\/6414"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/media\/1067"}],"wp:attachment":[{"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/media?parent=6409"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/categories?post=6409"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/tags?post=6409"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}