{"id":537,"date":"2021-05-14T22:10:56","date_gmt":"2021-05-14T13:10:56","guid":{"rendered":"https:\/\/deskplate.net\/blog\/2021\/05\/14\/rails6-select2-%e5%b0%8e%e5%85%a5\/"},"modified":"2021-05-14T22:10:56","modified_gmt":"2021-05-14T13:10:56","slug":"rails6-select2-%e5%b0%8e%e5%85%a5","status":"publish","type":"post","link":"https:\/\/deskplate.net\/blog\/archives\/537","title":{"rendered":"Rails6  select2  \u5c0e\u5165"},"content":{"rendered":"<p>$ yarn add tempusdominus-bootstrap-4<br \/>\n$ yarn add jquery<br \/>\n$ yarn add jquery-ui<br \/>\n$ yarn add select2<br \/>\n\u30fbapp\/javascript\/packs\/application.js<br \/>\nrequire(&#8216;jquery&#8217;)<br \/>\nrequire(&#8216;jquery-ui&#8217;)<br \/>\nimport &#8216;bootstrap&#8217;<br \/>\nimport &#8220;..\/stylesheets\/application&#8221;<br \/>\nimport &#8216;jquery-ui\/themes\/base\/core.css&#8217;;<br \/>\nimport &#8216;jquery-ui\/themes\/base\/menu.css&#8217;;<br \/>\nimport &#8216;jquery-ui\/themes\/base\/autocomplete.css&#8217;;<br \/>\nimport &#8216;jquery-ui\/themes\/base\/theme.css&#8217;;<br \/>\nimport &#8216;select2\/dist\/css\/select2.css&#8217;;<br \/>\n\u30fbapp\/javascript\/stylesheets\/application.scss<br \/>\n@import &#8216;bootstrap&#8217;;<br \/>\n@import &#8220;~tempusdominus-bootstrap-4\/src\/sass\/tempusdominus-bootstrap-4&#8221;;<\/p>\n<pre><code>&lt;select id=&quot;multiple&quot; class=&quot;multiple&quot; multiple=&quot;multiple&quot;&gt;\n&lt;option value=&quot;value1&quot;&gt;value1&lt;\/option&gt;\n&lt;option value=&quot;value2&quot;&gt;value2&lt;\/option&gt;\n&lt;option value=&quot;value3&quot;&gt;value3&lt;\/option&gt;\n&lt;option value=&quot;value4&quot;&gt;value4&lt;\/option&gt;\n&lt;option value=&quot;value5&quot;&gt;value5&lt;\/option&gt;\n&lt;\/select&gt;<\/code><\/pre>\n<pre><code>$(function () {\n$(&#039;#multiple&#039;).select2({\nplaceholder: &#039;Please Select&#039;,\nallowClear: true,\ndropdownAutoWidth: true,\nwidth: &#039;auto&#039;,\nmultiple: true\n})\n});<\/code><\/pre>\n<p>\u89e3\u9664\u3059\u308b\u5834\u5408\u306f<br \/>\n$(&#8216;#multiple&#8217;).val(null).trigger(&#8216;change&#8217;);<\/p>\n","protected":false},"excerpt":{"rendered":"<p>$ yarn add tempusdom<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22,41],"tags":[],"class_list":["post-537","post","type-post","status-publish","format-standard","hentry","category-javascript","category-ruby-on-rails"],"_links":{"self":[{"href":"https:\/\/deskplate.net\/blog\/wp-json\/wp\/v2\/posts\/537","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/deskplate.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/deskplate.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/deskplate.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/deskplate.net\/blog\/wp-json\/wp\/v2\/comments?post=537"}],"version-history":[{"count":0,"href":"https:\/\/deskplate.net\/blog\/wp-json\/wp\/v2\/posts\/537\/revisions"}],"wp:attachment":[{"href":"https:\/\/deskplate.net\/blog\/wp-json\/wp\/v2\/media?parent=537"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/deskplate.net\/blog\/wp-json\/wp\/v2\/categories?post=537"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/deskplate.net\/blog\/wp-json\/wp\/v2\/tags?post=537"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}