Rumah hujung hadapan web tutorial js 使用selectpicker下拉框案例分析

使用selectpicker下拉框案例分析

May 09, 2018 am 10:02 AM
jatuh ke bawah Kajian kes

这次给大家带来使用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 : '请选择'//默认显示内容 
  });
Salin selepas log masuk
//数据赋值 
var select = $("#slpk"); 
select.append("<option value=&#39;1&#39;>香蕉</option>"); 
select.append("<option value=&#39;2&#39;>苹果</option>"); 
select.append("<option value=&#39;3&#39;>橘子</option>"); 
select.append("<option value=&#39;4&#39;>石榴</option>"); 
select.append("<option value=&#39;5&#39;>棒棒糖</option>"); 
select.append("<option value=&#39;6&#39;>桃子</option>"); 
select.append("<option value=&#39;7&#39;>陶子</option>");
Salin selepas log masuk
//初始化刷新数据 
 $(window).on('load', function() { 
  $('.selectpicker').selectpicker('refresh'); 
 }); 
});
Salin selepas log masuk

3、jsp内容:

<select id="slpk" class="selectpicker" data-live-search="true" multiple></select>
Salin selepas log masuk

设置multiple时为多选,data-live-search="true"时显示模糊搜索框,不设置或等于false时不显示。

4、其他方法:

获取已选的项:

var selectedValues = [];  
slpk:selected").each(function(){ 
selectedValues.push($(this).val()); 
});
Salin selepas log masuk

选择指定项(编辑回显使用):

        单选:$('.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=&#39;"+datas[i].ROAD_CODE+"&#39;>" 
       + datas[i].ROAD_NAME + "</option>"); 
    } 
    $('.selectpicker').selectpicker('val', ''); 
    $('.selectpicker').selectpicker('refresh'); 
   } 
  }); 
 });
Salin selepas log masuk

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

JS怎么储存原始值与引用值

JS常见函数使用详解

Atas ialah kandungan terperinci 使用selectpicker下拉框案例分析. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Petua praktikal dan kajian kes untuk penukaran jenis data menggunakan numpy Petua praktikal dan kajian kes untuk penukaran jenis data menggunakan numpy Jan 26, 2024 am 08:21 AM

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? lungsur turun nombor siri Excel tidak meningkat dan semuanya 1 penyelesaian Mengapa senarai juntai bawah input Excel 1 mengandungi semua 1? lungsur turun nombor siri Excel tidak meningkat dan semuanya 1 penyelesaian Mar 13, 2024 pm 09:01 PM

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"

Pemahaman mendalam tentang penggunaan biasa dan analisis kes bagi fungsi transpose numpy Pemahaman mendalam tentang penggunaan biasa dan analisis kes bagi fungsi transpose numpy Jan 26, 2024 am 09:21 AM

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

Kajian kes perpustakaan dan rangka kerja popular dalam ekosistem C++ dalam projek sebenar Kajian kes perpustakaan dan rangka kerja popular dalam ekosistem C++ dalam projek sebenar Jun 03, 2024 pm 07:40 PM

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.

Alat pemasaran dan analisis kes pusat membeli-belah PHP Alat pemasaran dan analisis kes pusat membeli-belah PHP May 23, 2023 pm 02:32 PM

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

Analisis kes praktikal alat Kafka: Panduan permulaan pantas Analisis kes praktikal alat Kafka: Panduan permulaan pantas Feb 01, 2024 am 09:16 AM

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

Analisis mendalam dan analisis kes: tujuh prinsip standard kod PHP Analisis mendalam dan analisis kes: tujuh prinsip standard kod PHP Jan 13, 2024 am 11:42 AM

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 Aplikasi dan analisis kes atribut kedudukan tetap dalam CSS Dec 28, 2023 am 11:57 AM

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

See all articles