Ana içeriğe atla

Select2 ile multiple

Bir arkadaşın sorusuna karşılık küçük bir çalışma yaptım. Öncelikle soruyu yazalım :

Akif Bal
4 saat önce  -  Herkese açık olarak paylaşıldı
Merhaba
Select2 de multi select özelliğini aktif ettikten sonra çoklu seçimleri aktaramıyorum. Bu konuda bilginiz var mı? Son seçtiğim veriyi sunucuya yazıyor.
Şimdi konuyu inceleyelim. 
multiple özelliği select elementine birden fazla değeri seçme yeteneği sağlıyor. bu şekilde kullanıcının birden fazla değeri seçebilmesi sağlanıyor. Ancak bu özelliği kullandığınızda select elementi bir listbox haline gelmekte. Bu görüntüyü select2 ile daha güzel sunmanız mümkün. aşağıda 2 farklı eleman gözükmekte : 
textbox şeklinde gözüken eleman select2 . alt taraftaki de select elemanının multiple görüntüsü. 
Şimdi soruya geri dönersek 
1. eğer select2 ve multiple kullanacak isek select elemanı üzerinden bunu oluşturmak daha iyi olacaktır. 
2. Eğer bu elemandan seçilen değerleri server tarafında görmek istiyorsanız farklı teknolojilerde farklı kullanım şekillerine dikkat etmeniz lazım.
Ben konuyu hızlıca php tarafında modelledim. Aşağıda yukarıdaki görüntüyü oluşturan kodları bulacaksınız. Burada dikkatinizi çekmek istediğim konu select elemanının name'i. php için name'in sonuna [] eklemeniz gerekiyor. Bu şekilde php bu elemandan gelen bilgileri doğru şekilde algılayabiliyor.

Soruyu soran arkadaşımız eğer kullandığı teknolojiyi yazarsa, onunla ilgili olarak makaleyi genişletebilirim. 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
 <title>PhpFiddle Initial Code</title>  
     <link rel=stylesheet href="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.0/select2.css"/>  
     <link rel=stylesheet href="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.0/select2-bootstrap.css"/>  
 <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>  
 <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.0/select2.js"></script>  
 <script type="text/javascript">  
     $(function(){  
         $('#s01').select2();  
     });  
 </script>  
 <style type="text/css">  
 </style>  
 </head>  
 <body>  
 <?php  
 function getValue($value){  
     if(isset($_POST['s01'])){  
         if(is_array($_POST['s01'])){  
             return in_array($value, $_POST['s01']);  
         }  
         else{  
             return $_POST['s01'] == $value;  
         }  
     }  
     return false;  
 }  
 if(isset($_POST['s01'])){  
     echo '<p>'. (is_array($_POST['s01'])? implode(",",$_POST['s01']) : $_POST['s01'])."</p>";  
 }  
 ?>  
     <form method="post">  
         <div >  
             Select 2 :  
             <select id="s01" name="s01[]" multiple style="width:150px">  
                 <option value="1"<?php echo getValue('1') ? ' selected' : '' ?>>Bir</option>  
                 <option value="2"<?php echo getValue('2') ? ' selected' : '' ?>>İki</option>  
                 <option value="3"<?php echo getValue('3') ? ' selected' : '' ?>>Üç</option>  
                 <option value="4"<?php echo getValue('4') ? ' selected' : '' ?>>Dört</option>  
                 <option value="5"<?php echo getValue('5') ? ' selected' : '' ?>>Beş</option>  
             </select>  
         </div>  
         <input type="submit" value="send" />  
         <div> select(multiple) :   
             <select id="s02" name="s02[]" multiple>  
             <option value="1"<?php echo getValue('1') ? ' selected' : '' ?>>Bir</option>  
             <option value="2"<?php echo getValue('2') ? ' selected' : '' ?>>İki</option>  
             <option value="3"<?php echo getValue('3') ? ' selected' : '' ?>>Üç</option>  
             <option value="4"<?php echo getValue('4') ? ' selected' : '' ?>>Dört</option>  
             <option value="5"<?php echo getValue('5') ? ' selected' : '' ?>>Beş</option>  
         </select>  
         </div>  
     </form>  
     <pre><?php var_dump($_POST); ?></pre>  
 </body>  
 </html>  

Yorumlar

Bu blogdaki popüler yayınlar

Vue.js, Vuetify, Typescript ve Jest ile unit test yazmak

Vue.js, Vuetify, Typescript ve Jest ile unit test yazmak Writing unit test with Vue.js, Vuetify, Typescript and Jest
Geliştirmekte olduğumuz proje kapsamında Vue.js, Vuetify ve Typescript ile çalışmaktayız. Burada unit test yazmak istediğimizde biraz araştırma yapmak, ve çıkan problemlerle boğuşmak zorunda kaldık. Bu yazıda bulduğumuz çözümler ile konuyu anlatmak istiyorum :
Öncelikle unit test aracı olarak jest kullanmaya karar verdik. Vue.js Cli tarafından öncelik Mocka'ya verilmiş olsada bizim projemizde onu açlıştırmak hiç kolay olmadı. Sıkıntı typescript kullanmamızdan kaynaklanmakta. bu iş için kullanacağımız araçların hepsi typescript destekli değil maalesef. Gelelim adımlara :
1. npm ile bazı paketleri projemize eklememiz lazım :
npm i -D jest@23.6.0 jsdom@13.2.0 jsdom-global@3.0.2 ts-jest@23.10.5 @vue/test-utils @vue/cli-plugin-unit-jest @vue/cli-plugin-typescript

Burada önemli nokta jest sürümünün 23'de kalması. Çünkü ts-jest şu anda (11.02.2019 itibari ile) sadece je…

MongoDB'yi Çalıştırmak

MongoDB'yi development makinamıza kurduktan sonra (kurulumu şu makalemde görebilirsiniz), artık onunla çalışmamız lazım. Ancak bunun için öncelikle mongo db 'nin çalışır hale gelmesi gerekiyor. Bu işlem 2 şekilde olabilir.
1. ihtiyaç olduğunda mongodb'yi elle çalıştırabilirsiniz
2. mongodb yi windows servis olarak çalıştırıp, bilgisayar her çalıştığında otomatik olarak çalışmasını sağlayabilirsiniz.

Öncelikle mongodb'yi command prompt'dan çalıştırabilmek için bir ayar yapmamız lazım. Bunun için önceki makaleme bakabilirsiniz : http://www.alperkonuralp.com/2016/10/mongodbyi-command-prompttan-calstrmak.html

Şimdide MongoDB'nin veri tabanı dosyalarını depolayabilmesi için gerekli olan dizinleri oluşturalım.
1. Command Prompt açılır. ( bunun için start tuşunda cmd yazıp enter'e basmanız yeterli olacaktır. Ancak yönetici yetkileri ile açmak daha iyi olacağı için cmd yazdığınızda görünen programa sağ tıklayıp yönetici olarak aç seçeneği ile açmanız daha iyi olaca…

Vuejs ve Typescript konuları

Son zamanlarda projelerimizde Vuejs ve typescript kullanıyoruz. Bu iki dünya ile ilgili olarak karşılaştığımız problemlerini ve çözümlerini elimden geldiğince burada paylaşmaya çalışacağım.