下拉框：单选也可以多选
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>bootstrap form</title>
<link rel="stylesheet" href="../bootstrap-3.3.7/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="../bootstrap-3.3.7/plugin/css/bootstrap-select.css" />
<script src="../assets/js/jquery-2.1.4.min.js"></script>
<script src="../bootstrap-3.3.7/dist/js/bootstrap.min.js"></script>
<script src="../bootstrap-3.3.7/plugin/bootstrap-select.js"></script>
<script>
function getValues(){
alert($("#sex").val());
}
</script>
</head>
<body>
<div class="container">
<div class="row" >
<div class="col-xs-6" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<form role="form" class="form-vertical">
<div class="form-group" >
<label for="name">名称</label>
<input type="text" class="form-control" id="name" placeholder="">
</div>
<div class="form-group" >
<label for="sex">性别</label>
<select class="selectpicker" id="sex">
<option value="1">男</option>
<option value="2">女</option>
</select>
</div>
</form>
</div>
<script>
$("#sex").selectpicker('val', '2');
</script>
</div>
</div>
<a onclick="getValues()" style="margin-left: 150px;">获取选中值</a>
</body>
</html>
分享到：
相关推荐
例如，你可以使用`.bs-select-{size}`（如`.bs-select-lg`）来改变下拉框的大小，或者使用`.bs-select-{color}`（如`.bs-select-primary`）来改变其背景色。 4. **事件处理**：该插件提供了多种事件，如`changed.bs...
这个压缩包"bootstrap-select-1.13.0-dev.rar"包含的是Bootstrap Select的一个开发版本，版本号为1.13.0。这个版本可能包含最新的功能、修复的bug以及对性能的优化，适用于开发者进行自定义和扩展。 在Bootstrap ...
Bootstrap Select 是一个基于 Bootstrap 框架的插件，它扩展了原生的 HTML select 元素，提供了更丰富的交互性和美观的视觉效果。在版本 1.13.14 中，这个插件继续致力于提供高效、易用且响应式的下拉选择组件，适用...
在"bootstrap-select-1.13.0-dev"这个版本中，我们看到了一个开发版的源码，这通常意味着它包含了最新的特性、修复的bug以及可能尚未正式发布的改进。 1. **多选功能**：Bootstrap Select允许用户同时选择多个选项...
Bootstrap-select.js是一款基于Bootstrap框架的下拉框功能增强插件，专为提升用户界面的交互性和功能多样性而设计。在Bootstrap的原始下拉菜单基础上，它添加了一系列实用特性，使得在网页开发中处理选择项变得更加...
`bootstrap-select`是一个基于Bootstrap的下拉框增强插件，它提供了丰富的自定义选项和交互性，包括搜索功能。这个插件允许用户在下拉框中输入文字，系统会实时地进行模糊匹配，展示与输入文字相关的选项，极大地...
在压缩包`bootstrap-select-1.13.9`中，你可能会发现以下内容： - `dist` 文件夹：包含编译后的CSS和JS文件，可以直接在项目中引用。 - `src` 文件夹：源代码，如果你需要自定义或扩展插件，可以在这里查看和修改。...
`bootstrap-select.js` 和 `bootstrap-select.min.js` 是这个插件的 JavaScript 文件，它们包含了所有必要的逻辑来实现下拉选择框的各种交互效果和功能。`bootstrap-select.js` 是未压缩的版本，适合在开发环境中...
2. **初始化Bootstrap Select**：在文档加载完成后，通过JavaScript调用Bootstrap Select插件的初始化方法，如`$('select').selectpicker();`。这会将普通的`<select>`转换为带有Bootstrap样式的下拉框。 3. **树形...
这个压缩包“bootstrap-select使用示例.rar”包含了使用该插件的具体代码实例，供开发者参考和学习。 首先，让我们了解一下`bootstrap-select`的基本用法。在HTML中，你需要将普通的`<select>`元素与`<option>`子...
Bootstrap Table是一款广泛应用于Web开发中的开源插件，它基于Twitter Bootstrap框架，为开发者提供了一种简单、优雅的方式来展示数据，并提供了丰富的功能，如排序、筛选、分页等。这款插件设计初衷是解决传统HTML...
在 `bootstrap-select-master` 压缩包中，通常包含了源代码、示例、CSS、JS 文件和文档。通过查看这些文件，你可以更深入地了解如何配置和自定义这个插件，以及解决可能遇到的问题。记得在项目中正确引用这些资源，...
7. **插件扩展**：Bootstrap Select允许开发者通过插件系统添加额外的功能，比如添加新的选择器样式、自定义选项渲染等。 8. **API方法**：包括`selectpicker('refresh')`用于更新已存在的选择器，`selectpicker('...
完成以上步骤后，Bootstrap Glyphicons图标应该能在`bootstrap-select.js`插件以及其他使用到的地方正确显示。请注意，随着技术的发展，Bootstrap的后续版本可能会弃用某些特性，因此保持框架和插件的更新是确保项目...
在本话题中，我们聚焦于Bootstrap Table的一个扩展功能——可编辑下拉框，这得益于`bootstrap-table-editable`插件的使用。这个插件允许用户在表格的单元格内直接进行编辑，包括选择下拉框中的值。 `bootstrap-...
Bootstrap、Select2 和 ZTree 是三个在Web开发中常用的库，它们分别提供了不同的功能，而将它们整合在一起可以实现更复杂的交互式用户界面。这里我们将深入探讨这些库以及如何将它们结合来创建一个下拉框带树结构的...
很全的bootstrap全家桶插件，包括bootstrap，bootstrap-datetimepicker，bootstrap-select，bootstrap-table，bootstrapValidator
在这个"Bootstrap-selectpicker多选框插件的demo源码"中，我们可以学习到如何在项目中集成和使用这个插件。 首先，Bootstrap-selectpicker提供了多选功能，允许用户在下拉菜单中选择多个选项。这在需要用户输入一组...
Bootstrap Editable 还提供了多种内置的编辑器类型，如 `text`、`textarea`、`select`、`date` 等，以满足不同的数据输入需求。你可以根据实际场景选择合适的编辑器类型，并自定义其选项，例如设置预设值、验证规则...
此外，如果你在压缩包中找到了`bootstrap-selectpicker`文件夹，可能包含了该插件的源代码和示例，这将有助于你更好地理解和自定义这个组件。你可以查看其中的CSS和JS文件，以及示例HTML，学习如何将Bootstrap-...