{"id":970,"date":"2024-04-16T03:58:41","date_gmt":"2024-04-15T18:58:41","guid":{"rendered":"http:\/\/inwelly.com\/?p=970"},"modified":"2024-04-22T05:05:03","modified_gmt":"2024-04-21T20:05:03","slug":"javascript-%eb%a9%80%ed%8b%b0-select2-on-bootstrap","status":"publish","type":"post","link":"https:\/\/inwelly.com\/?p=970","title":{"rendered":"JAVASCRIPT \uba40\ud2f0 select2 on bootstrap"},"content":{"rendered":"\n
\n

<link rel=”stylesheet” href=”\/css\/select2.min.css”><\/p>\n<\/blockquote>\n\n\n\n

\/\/\/\/ \uc2e4\ud589 --------------------------------------------------------------------------------<\/code><\/pre>\n\n\n\n
\n
<select class=”form-control select2 select2-hidden-accessible” disabled id=”TM_PERIOD” name=”TM_PERIOD” multiple=”” data-placeholder=”select the time” style=”width: 300px;” tabindex=”-1″ aria-hidden=”true”><\/p>\n\n\n\n
<option value=”A” >\uc804\uccb4<\/option><\/p>\n\n\n\n
<option value=”01″ >01~02<\/option><\/p>\n\n\n\n
<option value=”02″ >02~03<\/option><\/p>\n\n\n\n
<option value=”03″ >03~04<\/option><\/p>\n\n\n\n
<\/select><\/p>\n\n\n\n
<script><\/p>\n\n\n\n
$(function(){<\/p>\n\n\n\n
\/\/Initialize Select2 Elements<\/p>\n\n\n\n
$(‘.select2’).select2()<\/p>\n\n\n\n
});<\/p>\n\n\n\n
<\/script><\/p>\n\n\n\n
<script src=”\/js\/select2.full.min.js” ><\/script><\/p>\n<\/blockquote>\n\n\n\n
\/\/\/\/ \uc2e4\ud589 \uc804\ub2ec  --------------------------------------------------------------------------------<\/code><\/pre>\n\n\n\n
\n
<input type=text id=”final_show_tm_arr” name=”final_show_tm_arr”><\/p>\n\n\n\n
<script><\/p>\n\n\n\n
 var ARR_ALL_SHOWTM  = new Array ;<\/p>\n\n\n\n
 var ARR_EACH_SHOWTM = new Array ;<\/p>\n\n\n\n
 var CHK_ALL = 0 ;<\/p>\n\n\n\n
 $.makeArray($(“li”).map(function(){<\/p>\n\n\n\n
 var liMap = $(this).attr(“title”) ;<\/p>\n\n\n\n
 if(typeof liMap == “undefined”){<\/p>\n\n\n\n
 }<\/p>\n\n\n\n
 else<\/p>\n\n\n\n
 {<\/p>\n\n\n\n
 if( liMap == ‘\uc804\uccb4’ )<\/p>\n\n\n\n
 {<\/p>\n\n\n\n
    $(“#TM_PERIOD option”).each  ( function() <\/p>\n\n\n\n
    {<\/p>\n\n\n\n
  if( $(this).val() !=”A” )<\/p>\n\n\n\n
  {<\/p>\n\n\n\n
  \/\/ console.log(“all option :”+$(this).val());<\/p>\n\n\n\n
  ARR_ALL_SHOWTM.push ( $(this).val() );<\/p>\n\n\n\n
  }<\/p>\n\n\n\n
    });<\/p>\n\n\n\n
 CHK_ALL++;<\/p>\n\n\n\n
 return false;<\/p>\n\n\n\n
 }<\/p>\n\n\n\n
 else<\/p>\n\n\n\n
 {<\/p>\n\n\n\n
 ARR_EACH_SHOWTM.push(liMap.substring( 0, 2 ));<\/p>\n\n\n\n
 \/\/ console.log(“select option without A :”+liMap.substring( 0, 2 ));<\/p>\n\n\n\n
 }<\/p>\n\n\n\n
 }<\/p>\n\n\n\n
}));<\/p>\n\n\n\n
$(“#final_show_tm_arr”).val(ARR_EACH_SHOWTM);<\/p>\n\n\n\n
<\/script><\/p>\n<\/blockquote>\n\n\n\n
\/\/\/ \ub370\uc774\ud130\ubca0\uc774\uc2a4\uc5d0\uc11c \ub098\uc628\uac83\uc744 \ub2e4\uc2dc \uc801\uc6a9 -----------------------------------------------<\/code><\/pre>\n\n\n\n
\n
<script><\/p>\n\n\n\n
var INVENSTR = “01,02,03”;<\/p>\n\n\n\n
if(INVENSTR)<\/p>\n\n\n\n
{<\/p>\n\n\n\n
function sliceFn(val)<\/p>\n\n\n\n
{<\/p>\n\n\n\n
var str = val ;<\/p>\n\n\n\n
str = “00” + str ;<\/p>\n\n\n\n
str = str.slice(-2);<\/p>\n\n\n\n
return str;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
var invenVal = INVENSTR ;<\/p>\n\n\n\n
var arr = invenVal.split(“,”);<\/p>\n\n\n\n
var arr_val = 0 ;<\/p>\n\n\n\n
var arr_val_add = 0 ;<\/p>\n\n\n\n
var inputarr = “” ;<\/p>\n\n\n\n
var inputarrX = [] ;<\/p>\n\n\n\n
var inputarrY = new Array;<\/p>\n\n\n\n
var val_sum = “”;<\/p>\n\n\n\n
$.each(arr, function(i, obj)<\/p>\n\n\n\n
{<\/p>\n\n\n\n
inputarrY.push(arr[i]);<\/p>\n\n\n\n
arr_val = arr[i] * 1 ;<\/p>\n\n\n\n
inputarrX.push(arr_val);<\/p>\n\n\n\n
})<\/p>\n\n\n\n
if( inputarrX.length == 3 ) <\/p>\n\n\n\n
{<\/p>\n\n\n\n
var $PeriodMulti = $(“.select2-hidden-accessible”).select2();<\/p>\n\n\n\n
$PeriodMulti.val([“A”]).trigger(“change”);<\/p>\n\n\n\n
}<\/p>\n\n\n\n
else<\/p>\n\n\n\n
{<\/p>\n\n\n\n
var $PeriodMulti = $(“.select2-hidden-accessible”).select2();<\/p>\n\n\n\n
$PeriodMulti.val(inputarrY).trigger(“change”);<\/p>\n\n\n\n
}<\/p>\n\n\n\n
}<\/p>\n\n\n\n
<\/script><\/p>\n<\/blockquote>\n\n\n\n
\"\"<\/figure>\n","protected":false},"excerpt":{"rendered":"
<link rel=”stylesheet” href=”\/css\/select2.min.css”> <select class=”form-control select2 select2-hidden-accessible” disabled id=”TM_PERIOD” name=”TM_PERIOD” multiple=”” data-placeholder=”select the time” style=”width: 300px;” tabindex=”-1″ aria-hidden=”true”> <option value=”A” […]<\/p>\n","protected":false},"author":1,"featured_media":1279,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-970","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/inwelly.com\/index.php?rest_route=\/wp\/v2\/posts\/970","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inwelly.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inwelly.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inwelly.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inwelly.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=970"}],"version-history":[{"count":1,"href":"https:\/\/inwelly.com\/index.php?rest_route=\/wp\/v2\/posts\/970\/revisions"}],"predecessor-version":[{"id":972,"href":"https:\/\/inwelly.com\/index.php?rest_route=\/wp\/v2\/posts\/970\/revisions\/972"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inwelly.com\/index.php?rest_route=\/wp\/v2\/media\/1279"}],"wp:attachment":[{"href":"https:\/\/inwelly.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=970"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inwelly.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=970"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inwelly.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=970"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}