1.css
<style>
.divBox{
width:400px;
margin:100px auto;
}
.divBox span{
vertical-align:top;
display:inline-block;
margin-top:16px;
}
.divBox .duiMutiple{
display:inline-block;
width:330px;
vertical-align:top;
} .divSel{
height:35px;
line-height:35px;
padding-left:10px;
cursor:pointer;
border-radius:5px;
border:1px solid #A0A0A0;
margin-top:10px;
background:url('images/sel.png') no-repeat 310px center;
background-size:10px;
}
select{
margin-top:10px;
width:330px;
height:150px;
border-radius:5px;
border:1px solid #A0A0A0;
display:none;
}
</style>
2.html
<div class="divBox">
<span>水果</span>
<div class="duiMutiple">
<div class="divSel">可多选</div>
<select id="usertype" name="usertype" class="selectpicker show-tick form-control" multiple data-live-search="false">
<option value="0">苹果</option>
<option value="1">菠萝</option>
<option value="2">香蕉</option>
<option value="3">火龙果</option>
<option value="4">梨子</option>
<option value="5">草莓</option>
<option value="6">哈密瓜</option>
<option value="7">椰子</option>
<option value="8">猕猴桃</option>
<option value="9">桃子</option>
</select>
</div>
</div>
3.js
<script>
//select多选
$("#usertype").hide();
$(".divSel").click(function() {
$("#usertype").toggle();
}); $('#usertype').change(function(){
var o=document.getElementById('usertype').getElementsByTagName('option');
var all="";
console.log(o[1]);
for(var i=0;i<o.length;i++){
if(o[i].selected){
all+=o[i].text+" ";
}
}
$('.divSel').html(all);
})
</script>

4.效果图

select多选的更多相关文章

  1. 工作需求----表单select多选交互

    由于工作需求接触select框多选的情况,以下是我分享的代码,主要是进入页面默认选中.支持多选属性: 1.html内容 multiple=”multiple” 属性为多选属性 <div clas ...

  2. JS 获取select(多选下拉)中所选值的示例代码

    通过js获取select(多选下拉)中所选值,具体实现如下,有需要的朋友可以参考下,希望对大家有所帮助 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML ...

  3. 火狐下<a>标签里嵌套的<select>不能选的bug

    今天遇到了这个问题,网上一找就找到原因了:在狐火下<a>标签里嵌套的<select>不能选 可是我查找这个问题过程中依然饶了一些时间,原因是在<a>标签没有写hre ...

  4. 在ASP.NET MVC中实现Select多选

    我们知道,在ASP.NET MVC中实现多选Select的话,使用Html.ListBoxFor或Html.ListBox方法就可以.在实际应用中,到底该如何设计View Model, 控制器如何接收 ...

  5. select多选框

    select多选框 效果: 代码: <HTML> <HEAD> <TITLE>选择下拉菜单</TITLE> <meta http-equiv=&q ...

  6. vue结合element-ui 的select 全选问题

    下拉列表多选 问题 通过操作 所有来进行全选 全不选问题 element-ui 中 select 记录下自己最近使用element-ui 中的 select多选问题 在element中默认是指单纯多选 ...

  7. layui动态修改select的选中项

    layui动态修改select的选中项:(在layUI下给select设置默认选项) 例: $("select[name='result']").val(11); //重新渲染表单 ...

  8. select多选 multiple的使用

    select多选  multiple的使用 <html> <head> <script type="text/javascript"> func ...

  9. select2多选设置select多选,select2取值和赋值

    select2设置select多选,select2取值和赋值,作为筛选条件的时候,取值相对简单,把选中的id值转为字符串传给后端查询,查询之后会刷新页面,为了在下拉框中显示刚刚选中的值,就需要给sel ...

随机推荐

  1. 封装HttpURLConnection

    package com.pingyijinren.test; import java.io.BufferedReader; import java.io.InputStream; import jav ...

  2. Same Tree (二叉树DFS)

    Given two binary trees, write a function to check if they are equal or not. Two binary trees are con ...

  3. [大雾雾雾雾] 告别该死的 EFCore Fluent API

    [EF Core Oracle  列名大小写问题] [EF Core Oracle column name case problem] [EF Core PostgreSql 列名大小写问题] [EF ...

  4. centos7容量扩充

    新买的2T 绿盘到货了~~好开心的说~但毕竟是第一次安装,事先还是在网上搜索了很多资料才敢动手,下面就开始啦~ 环境:Centos7.dell服务器.2T容量绿盘 1.硬盘连接好之后,开机先使用fdi ...

  5. Unity3D 玻璃 Shader

     Shader "Custom/Glass" { // Upgrade NOTE: replaced 'SeperateSpecular' with 'SeparateSpec ...

  6. android中单元測试中的断言assert的使用与扩展

    首先看一组对照,比方说我们要測试的结果是一个Linearlaout AssertJ Android: assertThat(layout).isVisible() .isVertical() .has ...

  7. 调试 Android* x86 应用程序的方法以及要使用的工具

    作者:Xiaodong Wang 1.简单介绍 众所周知,Android* 开发者头顶很多称呼:设计员.程序员等,而且一般会不可避免地被称为故障检修工. 代码中的错误无法避免.因此不管您是否一開始就造 ...

  8. COCOS学习笔记--即时动作ActionInstant

    Cocos引擎中的动作类的关系图例如以下: 能够看出,Action是继承自Ref类的,之前我的博客中也有讲过,Ref类是cocos2dx全部类的基类.动作类(Action)是全部动作的基类.它通过cr ...

  9. 模式识别之车牌识别---一个开源车牌识别项目easypr

    http://doc.okbase.net/subconscious/archive/105312.html https://github.com/liuruoze http://www.cnblog ...

  10. oracle type类型

    转载 http://blog.sina.com.cn/s/blog_6cfb6b090100ve92.html 转自网络,具体用法我会再细化 1.概念    方法:是在对象类型说明中用关键字  MEM ...