도시 목록에 select2를 시험 적용

e_lib/select2/select2-bootstrap4.css

@@ -1,5 +1,5 @@
 /* select2-bootstrap4 with Darkly */
-.select2-container--bootstrap4 { display: block; color: black; }
+.select2-container--bootstrap4 { color: black; }
 
 .select2-container--bootstrap4 .select2-selection { background-color: #fff; border: 1px solid #ced4da; border-radius: 0.25rem; color: #495057; font-size: 1rem; outline: 0; }
 

hwe/b_currentCity.php

@@ -35,8 +35,12 @@ $templates = new \League\Plates\Engine('templates');
 <meta name="viewport" content="width=1024" />
 <?=WebUtil::printJS('../e_lib/jquery-3.3.1.min.js')?>
 <?=WebUtil::printJS('../e_lib/bootstrap.bundle.min.js')?>
+<?=WebUtil::printJS('../e_lib/select2/select2.full.min.js')?>
 <?=WebUtil::printJS('js/common.js')?>
+<?=WebUtil::printJS('js/currentCity.js')?>
 <?=WebUtil::printCSS('../e_lib/bootstrap.min.css')?>
+<?=WebUtil::printCSS('../e_lib/select2/select2.min.css')?>
+<?=WebUtil::printCSS('../e_lib/select2/select2-bootstrap4.css')?>
 <?=WebUtil::printCSS('../d_shared/common.css')?>
 <?=WebUtil::printCSS('css/common.css')?>
 <style>
@@ -63,8 +67,9 @@ $templates = new \League\Plates\Engine('templates');
 <table align=center width=1000 class='tb_layout bg0'>
     <tr>
         <td width=998>
-            <form name=cityselect method=get>도시선택 :
-                <select name=citylist size=1 style=color:white;background-color:black;width:798px;>
+            <form name=cityselect method=get>
+                <div style='text-align:center;'>도시선택 :
+                <select id="citySelector" name=citylist size=1 style='display:inline-block;min-width:400px;'>
 <?php
 if(!$citylist){
     $citylist = $me['city'];
@@ -79,11 +84,11 @@ if($me['level'] == 0) {
     echo "
                     <option value={$city['city']}";
     if($city['city'] == $citylist) { echo " selected"; $valid = 1; }
-    echo ">========【".StringUtil::padString($city['name'], 4, '_')."】";
+    echo ">【".StringUtil::padString($city['name'], 4, '_')."】";
     if($city['nation'] == 0) echo "공백지";
-    elseif($me['nation'] == $city['nation']) echo "본국==";
-    else echo "타국==";
-    echo "==</option>";
+    elseif($me['nation'] == $city['nation']) echo "본국";
+    else echo "타국";
+    echo "</option>";
 } else {
     // 아국 도시들 선택
     $query = "select city,name,nation from city where nation='{$me['nation']}'";
@@ -95,11 +100,11 @@ if($me['level'] == 0) {
         echo "
                         <option value={$city['city']}";
         if($city['city'] == $citylist) { echo " selected"; $valid = 1; }
-        echo ">========【".StringUtil::padString($city['name'], 4, '_')."】";
+        echo ">【".StringUtil::padString($city['name'], 4, '_')."】";
         if($city['nation'] == 0) echo "공백지";
-        elseif($me['nation'] == $city['nation']) echo "본국==";
-        else echo "타국==";
-        echo "==</option>";
+        elseif($me['nation'] == $city['nation']) echo "본국";
+        else echo "타국";
+        echo "</option>";
     }
 
     // 아국 장수가 있는 타국 도시들 선택
@@ -112,11 +117,11 @@ if($me['level'] == 0) {
         echo "
                         <option value={$city['city']}";
         if($city['city'] == $citylist) { echo " selected"; $valid = 1; }
-        echo ">========【".StringUtil::padString($city['name'], 4, '_')."】";
+        echo ">【".StringUtil::padString($city['name'], 4, '_')."】";
         if($city['nation'] == 0) echo "공백지";
-        elseif($me['nation'] == $city['nation']) echo "본국==";
-        else echo "타국==";
-        echo "==</option>";
+        elseif($me['nation'] == $city['nation']) echo "본국";
+        else echo "타국";
+        echo "</option>";
     }
 }
 
@@ -144,19 +149,18 @@ if($myNation['level'] > 0) {
         foreach ($db->query('SELECT city,name,nation FROM city WHERE city in %li', $spyCities) as $city) {
             echo "<option value={$city['city']}";
             if($city['city'] == $citylist) { echo " selected"; $valid = 1; }
-            echo ">========【".StringUtil::padString($city['name'], 4, '_')."】";
+            echo ">【".StringUtil::padString($city['name'], 4, '_')."】";
             if($city['nation'] == 0) echo "공백지";
-            elseif($me['nation'] == $city['nation']) echo "본국==";
-            else echo "타국==";
-            echo "==</option>";
+            elseif($me['nation'] == $city['nation']) echo "본국";
+            else echo "타국";
+            echo "</option>";
         }
     }
 
 }
 
 echo "
-                </select>
-                <input type=submit value='도 시 선 택'>
+                </select></div>
                 <p align=center>명령 화면에서 도시를 클릭하셔도 됩니다.</p>
             </form>
         </td>

hwe/css/common.css

@@ -218,3 +218,11 @@ div.bar_out div.bar_in{
     margin:0;
     padding:0;
 }
+
+.select2-selection--single.simple-select2-align-center .select2-selection__rendered {
+    text-align: center;
+}
+
+.select2-dropdown.simple-select2-align-center li.select2-results__option{
+    text-align: center;
+}

hwe/js/currentCity.js

@@ -0,0 +1,22 @@
+$(function() {
+    $('#citySelector').select2({
+        theme: 'bootstrap4',
+        placeholder: "도시를 선택해 주세요.",
+        allowClear: false,
+        language: "ko",
+        containerCss: {
+            display: "inline-block !important"
+        },
+        containerCssClass: 'simple-select2-align-center',
+        dropdownCssClass: 'simple-select2-align-center',
+    });
+    $('#citySelector').on('select2:select', function(e){
+        var data = e.params.data;
+        if(!data.selected || data.disabled){
+            return;
+        }
+        var $obj = $('#citySelector').parents('form');
+        $obj.submit();
+        console.log($obj);
+    });
+});