Bootstrap系列 -- 15. 下拉选择框select

 

  Bootstrap框架中的下拉选择框使用和原始的一致,多行选择设置multiple属性的值为multiple。Bootstrap框架会为这些元素提供统一的样式风格

 

<form role="form">
  <div class="form-group">
    <select class="form-control">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      </select>
  </div>
  <div class="form-group">
      <select multiple class="form-control">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
      </select>
  </div>

  <div class="form-group">
      <select multiple class="form-control">
        <option>踢足球</option>
        <option>游泳</option>
        <option>踢足球</option>
        <option>游泳</option>
        <option>踢足球</option>
        <option>游泳</option>
        <option>踢足球</option>
        <option>游泳</option>
        <option>踢足球</option>
        <option>游泳</option>
        <option>踢足球</option>
        <option>游泳</option>
      </select>
  </div>

</form>   

 

时间: 2024-08-01 16:04:18

Bootstrap系列 -- 15. 下拉选择框select的相关文章

JS实现的5级联动Select下拉选择框实例_javascript技巧

本文实例讲述了JS实现的5级联动Select下拉选择框.分享给大家供大家参考.具体如下: 这是一个基于JS的5级联动Select下拉选择框,这里演示的仅是一个示例,没有做汉化,当初从老外网站扒下时花了很多时间,当然我们平时用时候可能不需要这么多级,意在介绍一种编写方法和思路,希望大家喜欢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-select-5-option-codes/ 具体代码如下: <title>一个基于JS的5级联动Se

多级联动下拉选择框,动态获取下一级_XML/RSS

    多级联动下拉选择框,动态获取下一级,每一级数据为XML,可支持无限级(浏览器端需要Microsoft.XMLDOM支持)     项目需要,一个材料类别表,三级,总共有7000多条记录,如果一次获取会很慢的,所以就是用了动态读取,每次就读一级,且服务器端使用了缓存,效率还不错. HTML代码如下: <select name="MaterialClass1" ChildSelectName="MaterialClass2"></select&

打开页面的时候动态初始化下拉选择框

问题描述 我先在打开某个页面的时候,初始化页面上的两个下拉列表框,即从数据库查询得到两个下拉选择框的item用list返回,在界面上展示出来.现在已经定义了一个Action,可以传入表名返回list, 但是现在纠结的是怎么在页面里边发送请求给action让action去查询数据库?怎么设置参数? 请高手给指点一二,谢谢了. 问题补充:andilyliao 写道 解决方案 建议用dwr组件,他把ajax都封装了起来,处理逻辑可以直接和JAVA类打交道,网上找一下资料.很好用的.解决方案二:这个~,

js实现可以输入的下拉选择的select

我们知道,一般select下拉框是只能选择的,不能用来输入内容的.而有时我们会遇到下拉框中没有要选择的信息项或者下拉选项特别多时,我们可以让select变成text,允许用户输入想要的内容,同时还可以在输入的时候将包含关键字的项也列出来,供快速选择.   本文将用实例和大家分享一款基于jQuery的下拉框插件,它允许用户输入内容,同时下拉选项中会及时匹配相关选项,支持键盘操作,还支持html选项内容,当然还能让下拉的过程带有动画效果.我们来看下如何使用. HTML结构 下面是一个基本的selec

JS简单设置下拉选择框默认值的方法_javascript技巧

本文实例讲述了JS简单设置下拉选择框默认值的方法.分享给大家供大家参考,具体如下: //根据下拉对象默认选中后台对应的记录 function setSelectOption(objSelect, targetValue){ if(objSelect){ var options = objSelect.options; if(options){ var len = options.length; for(var i=0;i<len;i++){ if(options[i].value == targ

基于jQuery下拉选择框插件支持单选多选功能代码_jquery

由于最近项目的需求,需要做一个下拉选择框的插件,支持单选显示表单数据,多选显示表格数据,该插件主要运用了jQuery与jqgrid以及easyui. 下面给大家展示下效果图,如果大家感觉还不错,请参考实现代码: 多选:呈现列表 具体代码如下所示: /** *下拉框插件-chooseList *调用插件的方式以及格式: * 1.首先你需要创建一个div面板,给div定义ID * 2.在你所需要的地方调用插件: * 参数说明: * $("#divID").chooseList({ * qu

Bootstrap系列 -- 24. 下拉菜单基本用法

  在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件.当然,如果你使用的是未编译版本,在js文件夹下你能找到一个名为"dropdown.js"的文件.而Bootstrap.js 是依赖jQuery库的.所以在引入Bootstrap.js之前要引入jQuery.js. 这里请注意版本问题   基本使用方式如下: (1) 使用一个名为"dropdown"的容器包裹了整个下拉菜单元素 <div class=&

jquery自定义美化的下拉选择框例子

这是一款使用HTML5 SVG和CSS3制作的非常棒的select下拉菜单美化效果.我们可以通过JavaScript来将表单中元素修改为更加好看的样式,甚至是更复杂的表单元素,例如select下拉菜单.我们可以有非常多的表单美化方案,使用户可以得到更加好的用户体验. HTML结构 我们现在来看一下select下拉菜单的Html结构:. <select class="cs-select cs-skin-rotate">   <option value="&qu

Bootstrap系列 -- 26. 下拉菜单标题

  Bootstrap下拉菜单中使用 dropdown-header 来显示菜单标题,和上一篇说道的分割线一样 <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 下拉菜单 <