使用selectpicker下拉框案例分析
这次给大家带来使用selectpicker下拉框案例分析,使用selectpicker下拉框的注意事项有哪些,下面就是实战案例,一起来看一下。
前言
最近一直在用bootstrap 的一些东西,写几篇博客记录下。。。。
bootstrap selectpicker是bootstrap里比较简单的一个下拉框的组件,先看效果如下:
附上官网api链接,http://silviomoreto.github.io/bootstrap-select/.
下拉框的使用上基本操作一般是:单选、多选、模糊搜索、动态赋值等,下面来看如何使用:
使用方法如下
1、首先需要引入的css和js:
bootstrap.css
bootstrap-select.min.css
jquery-1.11.3.min.js
bootstrap.min.js
bootstrap-select.min.js
2、js代码如下:
$(function() { $(".selectpicker").selectpicker({ noneSelectedText : '请选择'//默认显示内容 });
//数据赋值 var select = $("#slpk"); select.append("<option value='1'>香蕉</option>"); select.append("<option value='2'>苹果</option>"); select.append("<option value='3'>橘子</option>"); select.append("<option value='4'>石榴</option>"); select.append("<option value='5'>棒棒糖</option>"); select.append("<option value='6'>桃子</option>"); select.append("<option value='7'>陶子</option>");
//初始化刷新数据 $(window).on('load', function() { $('.selectpicker').selectpicker('refresh'); }); });
3、jsp内容:
<select id="slpk" class="selectpicker" data-live-search="true" multiple></select>
设置multiple时为多选,data-live-search="true"时显示模糊搜索框,不设置或等于false时不显示。
4、其他方法:
获取已选的项:
var selectedValues = []; slpk:selected").each(function(){ selectedValues.push($(this).val()); });
选择指定项(编辑回显使用):
单选:$('.selectpicker').selectpicker('val', ‘列表id');
多选:var arr=str.split(','); $('.selectpicker').selectpicker('val', arr);
5、附上我的源码,下拉数据通过ajax从后台获取:
$(function() { $(".selectpicker").selectpicker({ noneSelectedText : '请选择' }); $(window).on('load', function() { $('.selectpicker').selectpicker('val', ''); $('.selectpicker').selectpicker('refresh'); }); //下拉数据加载 $.ajax({ type : 'get', url : basePath + "/lictran/tranStation/loadRoadForTranStationDetail", dataType : 'json', success : function(datas) {//返回list数据并循环获取 var select = $("#slpk"); for (var i = 0; i < datas.length; i++) { select.append("<option value='"+datas[i].ROAD_CODE+"'>" + datas[i].ROAD_NAME + "</option>"); } $('.selectpicker').selectpicker('val', ''); $('.selectpicker').selectpicker('refresh'); } }); });
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
Atas ialah kandungan terperinci 使用selectpicker下拉框案例分析. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Kemahiran praktikal dan analisis kes penukaran jenis data numpy Pengenalan: Dalam proses analisis data dan pengkomputeran saintifik, selalunya perlu untuk menaip penukaran data untuk menyesuaikan diri dengan keperluan pengkomputeran yang berbeza. Sebagai perpustakaan pengkomputeran saintifik yang biasa digunakan dalam Python, numpy menyediakan pelbagai fungsi dan kaedah penukaran jenis data Artikel ini akan memperkenalkan kemahiran praktikal penukaran jenis data dalam numpy dan menunjukkan aplikasi khususnya melalui analisis kes. 1. Latar belakang dan kepentingan penukaran jenis data Apabila melakukan analisis data dan pengiraan saintifik, jenis data yang berbeza mungkin memerlukan

Mengapa senarai juntai bawah input Excel 1 mengandungi semua 1? Hamparan Excel ialah perisian yang kami gunakan dalam kerja pejabat harian Saya percaya bahawa apabila ramai pengguna menggunakan isian automatik, yang pertama ialah 1, dan apabila mereka menarik ke bawah, ia juga 1. Jadi apa yang berlaku? Biarkan tapak ini memperkenalkan kepada pengguna secara terperinci penyelesaian kepada masalah bahawa juntai bawah nombor siri Excel tidak meningkat dan semuanya 1. Penyelesaian juntai bawah nombor siri Excel tidak bertambah dan semua nombor adalah 1. 1. Selepas kami memasukkan 1 dalam senarai juntai bawah dalam Excel, kami mendapati bahawa semua nombor adalah 1. Pada masa ini, kami boleh mengklik pilihan "Autolengkap ikon". 2. Kerana kaedah pengisian automatik adalah untuk menyalin sel, akan ada situasi di mana drop-down adalah semua 1. 3. Kami menyemak "Isi urutan"

Penggunaan biasa dan analisis kes bagi fungsi transpose numpy Dalam bidang pemprosesan data, pengkomputeran saintifik dan pembelajaran mesin, selalunya perlu untuk menukar tatasusunan atau matriks. Operasi transpose ialah operasi menukar baris dan lajur tatasusunan, yang boleh dicapai melalui fungsi transpose perpustakaan numpy. Artikel ini akan memperkenalkan penggunaan biasa fungsi transpose numpy dan seterusnya memahami aplikasinya melalui analisis kes. 1. Penggunaan biasa fungsi numpy transpose numpy.transpose() function numpy.transp

Dalam ekosistem C++, Qt ialah perpustakaan yang ideal untuk pembangunan GUI merentas platform, Boost.Asio memudahkan komunikasi rangkaian dan TensorFlow meningkatkan kecekapan pembangunan pembelajaran mesin. Menggunakan perpustakaan dan rangka kerja ini boleh memudahkan pembangunan perisian, meningkatkan kecekapan dan kualiti kod.

Dengan pengembangan dan pendalaman bidang e-dagang yang berterusan, semakin banyak syarikat mula memberi perhatian kepada jualan dalam talian mereka, dan pusat membeli-belah PHP, sebagai bentuk biasa laman web e-dagang, telah menjadi pilihan pertama bagi banyak syarikat. Walau bagaimanapun, hanya membina pusat membeli-belah PHP tidak mencukupi Bagaimana untuk mengoptimumkan operasi pusat membeli-belah PHP adalah kunci kepada pembangunan perusahaan. Oleh itu, artikel ini akan meneroka secara mendalam alat pemasaran dan kajian kes pusat beli-belah PHP untuk membantu syarikat mempromosikan jualan dan meningkatkan keuntungan dengan lebih baik. 1. Alat Pemasaran untuk PHP Mall 1. E-mel Pemasaran E-mel

Tajuk: Panduan Praktikal: Analisis Kes Praktikal untuk Bermula Dengan Pantas Alat Kafka 1. Pengenalan Apache Kafka ialah sistem pemesejan terbitan-langganan diedarkan yang boleh memproses sejumlah besar data dan memberikan daya pemprosesan yang tinggi, kependaman rendah dan toleransi kesalahan. Kafka telah digunakan secara meluas dalam pelbagai bidang, seperti pengumpulan log, analisis masa nyata, pemprosesan aliran data, dsb. 2. Gambaran keseluruhan alatan Kafka Kafka menyediakan satu siri alatan untuk mengurus dan mengendalikan gugusan Kafka. Alat ini termasuk: Alat baris arahan Kafka: digunakan untuk mencipta

Penjelasan terperinci dan analisis kes tujuh prinsip spesifikasi kod PHP Pengenalan PHP ialah bahasa skrip sumber terbuka yang digunakan secara meluas dan digunakan secara meluas dalam pembangunan aplikasi Internet. Dan spesifikasi kod yang baik adalah penting untuk meningkatkan kualiti kod, kebolehbacaan dan kebolehselenggaraan. Artikel ini akan memperkenalkan tujuh prinsip spesifikasi kod PHP dan menggunakan analisis kes untuk lebih memahami dan menggunakan prinsip ini. 1. Penamaan yang munasabah Semasa menulis kod PHP, penamaan fungsi, pembolehubah, kelas, dan lain-lain hendaklah deskriptif pada tahap tertentu untuk memudahkan orang lain memahami fungsi dan tujuan kod tersebut. ikut perintah yang munasabah

Aplikasi dan analisis kes atribut kedudukan tetap dalam CSS Dalam pembangunan web, atribut kedudukan tetap CSS adalah teknologi yang sangat biasa digunakan. Dengan menetapkan kedudukan elemen kepada tetap, kita boleh menetapkan elemen pada kedudukan tertentu pada halaman supaya ia tidak terjejas oleh menatal. Artikel ini akan memperkenalkan penggunaan asas atribut kedudukan tetap dan menyediakan beberapa kajian kes untuk membantu pembaca memahami dan menggunakan teknologi ini dengan lebih baik. 1. Penggunaan asas Dalam CSS, elemen kedudukan tetap adalah relatif kepada tetingkap penyemak imbas. Apabila elemen ditetapkan
