9 Ekim 2014 Perşembe

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>  
Yorum Gönder