{"id":6413,"date":"2024-08-24T11:59:53","date_gmt":"2024-08-24T02:59:53","guid":{"rendered":"https:\/\/taitan916.info\/blog\/?p=6413"},"modified":"2024-05-26T13:04:16","modified_gmt":"2024-05-26T04:04:16","slug":"post-6413","status":"publish","type":"post","link":"https:\/\/taitan916.info\/blog\/archives\/6413","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\u300cTom Select\u300d\u306e\u5229\u7528\u65b9\u6cd5"},"content":{"rendered":"

\u5148\u65e5\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<\/a>\u3092\u30e1\u30e2\u3057\u305f\u304cCSS\u306b\u82e5\u5e72\u7656\u304c\u3042\u3063\u305f\u3002\u4ed6\u306b\u4f3c\u305f\u3088\u3046\u306a\u30e9\u30a4\u30d6\u30e9\u30ea\u304c\u7121\u3044\u304b\u63a2\u3057\u305f\u3068\u3053\u308d\u300cTom Select\u300d\u304cCSS\u306b\u7656\u3082\u7121\u304f\u4f7f\u3044\u3084\u3059\u305d\u3046\u3002\u4ee5\u4e0b\u306b\u30b5\u30f3\u30d7\u30eb\u3068\u5229\u7528\u65b9\u6cd5\u3092\u30e1\u30e2\u3002<\/p>\n

 <\/p>\n

Choices.js<\/span><\/h2>\n

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

https:\/\/tom-select.js.org\/<\/a><\/p>\n

GitHub<\/span><\/h3>\n

https:\/\/github.com\/orchidjs\/tom-select<\/a><\/p>\n

CDN<\/span><\/h3>\n

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

<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/tom-select@2.3.1\/dist\/js\/tom-select.complete.min.js\"><\/script>\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/tom-select@2.3.1\/dist\/css\/tom-select.min.css\" rel=\"stylesheet\"><\/pre>\n
 <\/p>\n
\u30b5\u30f3\u30d7\u30eb<\/span><\/h2>\n
https:\/\/taitan916.info\/sample\/tom-select\/<\/a><\/p>\n
 <\/p>\n
\u5b9f\u88c5\u65b9\u6cd5<\/span><\/h2>\n
\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9<\/span><\/h3>\n
<div class=\"section\">\r\n    <div>\u5358\u4e00\u9078\u629e<\/div>\r\n    <select class=\"tom_1\">\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=\"tom_2\">\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=\"tom_3\">\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<style>\r\n.section{\r\n    margin: 10px 0;\r\n}\r\n<\/style>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/tom-select@2.3.1\/dist\/js\/tom-select.complete.min.js\"><\/script>\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/tom-select@2.3.1\/dist\/css\/tom-select.min.css\" rel=\"stylesheet\">\r\n<script>\r\nconst option_1 = {\r\n    items: [], \/\/\u30da\u30fc\u30b8\u8868\u793a\u6642\u306b\u672a\u9078\u629e\u72b6\u614b\r\n    placeholder: '\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044', \/\/\u30d7\u30ec\u30fc\u30b9\u30db\u30eb\u30c0\u30fc\r\n    hidePlaceholder: true, \/\/1\u3064\u4ee5\u4e0a\u9078\u629e\u3057\u305f\u5834\u5408\u306b\u30d7\u30ec\u30fc\u30b9\u30db\u30eb\u30c0\u30fc\u975e\u8868\u793a\r\n};\r\nconst option_2 = {\r\n    items: [],\r\n    plugins: ['remove_button'], \/\/\u672a\u9078\u629e\u30dc\u30bf\u30f3\u306e\u8868\u793a\r\n    maxItems: 3, \/\/\u6700\u5927\u9078\u629e\u6570\r\n    placeholder: '\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044',\r\n    hidePlaceholder: true,\r\n};\r\nconst option_3 = {\r\n    plugins: ['remove_button'],\r\n    maxItems: 3,\r\n    placeholder: '\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044',\r\n    hidePlaceholder: true,\r\n};\r\nconst tom_1 = new TomSelect('.tom_1', option_1);\r\nconst tom_2 = new TomSelect('.tom_2', option_2);\r\nconst tom_3 = new TomSelect('.tom_3', option_3);\r\n\r\n<\/script><\/pre>\n
 <\/p>\n
\u6240\u611f<\/h2>\n
\u300cTom Select\u300d\u306e\u65b9\u306fCSS\u3092\u6307\u5b9a\u3057\u306a\u304f\u3066\u3082\u305d\u306e\u307e\u307e\u4f7f\u3063\u3066\u3044\u3051\u305d\u3046\u3002\u307e\u305f\u30c7\u30b6\u30a4\u30f3\u7684\u306b\u3082\u3053\u3063\u3061\u306e\u65b9\u304c\u500b\u4eba\u7684\u306b\u306f\u597d\u304d\u304b\u3082\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
\u5148\u65e5\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 ... <\/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-6413","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\/6413","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=6413"}],"version-history":[{"count":1,"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/posts\/6413\/revisions"}],"predecessor-version":[{"id":6415,"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/posts\/6413\/revisions\/6415"}],"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=6413"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/categories?post=6413"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/tags?post=6413"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}