PHP

jQuery’de Onay Kutulu Çoklu Seçim Açılır Liste.

Çoklu seçim açılır menüsü, kullanıcının bir seçim kutusundaki birden çok seçeneği seçmesine izin vermek için inanılmaz derecede faydalıdır. Bir açılır menüde birden çok seçenek seçmenin iki yolu vardır. Birincisi, klavyenin kontrol(CTRL) düğmesini basılı tutmak ve ikincisi, jQuery kullanarak bir onay kutusu ile bir açılır menü oluşturmak için kullanıcının bir seçim kutusunda birden fazla seçenek seçebilmesidir. Sonrası daha kullanıcı dostudur ve web uygulamasını daha etkileyici hale getirir.

Bu yazıda, bootstrap multiselect eklentisini kullanarak onay kutulu jQuery Multiselect açılır listesini açıklayacağım. Bootstrap Multiselect, basit bir açılır listeyi onay kutularıyla çoklu seçim açılır listesine dönüştüren JQuery tabanlı bir eklentidir.

Adım 1: CSS ve JS’nin Altına Ekleyin.

  <head>      
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
   </head>

2. Adım: HTML kodunun altına ekleyin.

 <body><center>
        <select name="skills[]" multiple id="skills">
            <option value="Angular">Angular</option>
            <option value="React">React</option>
            <option value="VueJS">VueJS</option>
            <option value="Laravel">Laravel</option>
            <option value="JavaScript">JavaScript</option>
            <option value="Codeigniter">Codeigniter</option>
            <option value="PHP">PHP</option>
            <option value="Python">Python</option>
            <option value="Android">Android</option>
            <option value="iOS">iOS</option>
            <option value="HTML">HTML</option>
            <option value="XML">XML</option>
            <option value="MySql">MySql</option>
            <option value="PostgreSql">PostgreSql</option>
        </select>
    </body>

Adım 3: Aşağıdaki betiği ekleyin.

<script>
    $('#skills').multiselect({
          columns: 1,
          placeholder: 'Select Your Skills',
          search: true,
            includeSelectAllOption: true,
        });
</script>

JQuery Kullanarak İlerleme Çubuğu ile Çok Adımlı Form

İlgili Makaleler

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.

Başa dön tuşu