bootstrap下拉框select怎么实现

发布网友发布时间：2022-05-14 20:22

共3个回答

懂视网时间：2022-05-15 00:43

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'); 
 } 
 }); 
 });

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

推荐阅读：

url、href、src使用详解

Webpack怎样操作缓存

热心网友时间：2022-05-14 21:51

bootstrap下拉框select可以通过以下步骤实现：

获取多选下拉框对象数组

循环判断option选项的selected属性（true为选中，false为未选中）

使用value属性取出选中项的值。

实例演示如下：
HTML结构 option-A option-Boption-C option-D

javascript代码
function fun(){
var select = document.getElementById("test");
var str = [];
for(i=0;i<select.length;i++){
if(select.options[i].selected){
str.push(select[i].value);

JSP提交表单后，怎么得到下拉框select选中项的value值？

要得到下拉框select选中项的value值，我们要把jsp里的下拉框的选中值传递给servlet。

在servlet中String select=request.getParameter("selectName")，得到的是选中的option的value值，

那么如果我们把value值等于它的选择项的值得话就可以了

比如

<select name="selectName">
<option value="羽毛球">羽毛球</option >
<option value="篮球">羽毛球</option >
<option value="足球">羽毛球</option >

热心网友时间：2022-05-14 23:09

<div class= "row" style ="margin-top :10px;">
<div class= "form-group col-xs-12">
<label for= "sceneModel_title" class="col-sm-1 col-sm-offset-1 control-label" >分类: </label>
<div class= "col-sm-4">
<select class= "form-control selectpicker" multiple>
<option> 请选择</option >
<option> 1</option >
<option> 2</option >
<option> 3</option >
<option> 4</option >
<option> 5</option >
<option> 6</option >
</select>
</div>
<label for= "scene_title" class="col-sm-1 control-label" >标题: </label>
<div class= "col-sm-4">
<select class= "form-control selectpicker" multiple>
<option> 请选择</option >
<option> 1</option >
<option> 2</option >
<option> 3</option >
<option> 4</option >
<option> 5</option >
<option> 6</option >
</select>
</div>

<%-- <form:checkboxes path="sceneTypeRelations" items="${sceneTypeMap}" /> --%>

</div>
</div>

define(function(require, exports, mole) {

var $ = require( "jquery");
require( "jquery-validation/1.11.1/jquery.validate.min.js" );
require( "jquery-validation/1.11.1/messages_bs_zh.js" );
require( "bootstrap/select/bootstrap-select.min.css" )
require( "bootstrap/select/bootstrap-select.min.js" )
$(document).ready( function() {
// 聚焦第一个输入框
$( "input[name=name]").focus();
// 为inputForm注册validate函数
$( "#sceneModel").validate();

var lon = $("input[name=longitude]" ).val();
if (lon == "," ) {
$( "input[name=longitude]").val("" );
}

jQuery( '.selectpicker').selectpicker({
liveSearch: true,
size:8
});
});
mole.exports = $;
});