由于工作需求接触select框多选的情况,以下是我分享的代码,主要是进入页面默认选中、支持多选属性:

1.html内容

multiple=”multiple” 属性为多选属性
<div class="c-n-survey-option">
<select name="0" multiple=”multiple” class="c-n-survey-select" id="mySelect" >
<option>年龄段</option>
<option selected="selected">收入阶段</option>
<option selected="selected">地域</option>
<option>性别</option>
</select>
</div>
<div id="result"></div> <!--输出选中的内容-->

2.JQ代码

$("#mySelect").click(function () { //select多选的情况下选中的内容输出
var res = '';
for (var i = 0; i < $("#mySelect option:selected").length; i++) {
var o = $("#mySelect option:selected")[i];
res += $(o).attr("value") + " , ";
}
$("#result").html(res)
}); //进入页面默认选中
$("#mySelect").change(function(){
$(this).find("option:selected").text();
});
$("#result").html($("#mySelect").find("option:selected").text());

3.展示

aaarticlea/png;base64,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" alt="" />

工作需求----表单select多选交互的更多相关文章

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

    关于多选框,反选及选取几个: 1.html内容 <!--begin checkbox--> <div class="c_n_manage_tablexx"> ...

  2. SpreadJS V13.0发布,聚焦表单设计与数据交互,让您的工作效率突飞猛进!

    纯前端表格控件SpreadJS,是一款成功应用于华为.招商银行.天弘基金.苏宁易购等国内外知名企业的前端开发工具,其带来的价值不仅体现在帮助开发人员在其Web应用程序中快速构建 Web Excel . ...

  3. PHP基础班初学心得:用JQ实现表单的全选、反选、取消和删除功能

    摘要: 本人刚参加PHP基础班培训,由于之前毫无基础,分享的心得可能不规范,方法也许也"旁门左道",不能保证质量,只作自己总结学习,也希望能帮助到同样是初学者的朋友们,共同进步. ...

  4. form表单select联动

    下拉列表:二级联动菜单 Select对象的常用属性 options[]:返回所有option组成的一个数组: name:名称 value:option的value的值 length:设置或读取opti ...

  5. form表单获取多选的值

    flask 中 form 表单直接获取多选框的值时 language = request.values.getlist('values')或 language=request.from.getlist ...

  6. Django forms表单 select下拉框的传值

    今儿继续做项目,学习了Django的forms生成前端的代码. forms.py class SignupForm(forms.Form): username = forms.CharField(va ...

  7. JavaScript实现表单的全选,反选,获取值

    构思 通过for循环和for in循环来实现,界面效果如下 步骤 全选: 循环给所有的表单设置checked 反选: 循环内判断checked是否为true,如果为true则改为false否则改为tr ...

  8. Form表单之复选框checkbox操作

    input复选(checkbox): <label>input复选1组:</label> <input type="checkbox" name=&q ...

  9. 实现一个兼容eleUI form表单的多选组件

    本质上是实现了一个eleUI select组件中的创建条目功能的组件,仅仅是将dropdown的选择框变成了label形式.支持eleUI的form表单校验,同时组件也提供了组件内自定义校验的方法.常 ...

随机推荐

  1. Quick-lua3.3之listview

    前言 listview列表,在游戏中非常常见,比如道具列表,玩家列表,排行榜等等.每个版本可能使用方法可能有些差别,但是大同小异,原理和用途都是那几种,设置方向,间隔等. 这里是quick-lua3. ...

  2. VS2012一打开就停止工作的解决方法

    昨天刚装好VS2012,用得好好的,嘿,今早儿 一打开程序,就告诉我 VS2012停止工作,只有关闭程序或者调试程序. 小主酸菜郁闷不已,必须找到解决方法啊,错误提示如图: 错误原因:        ...

  3. CSS2样式中选择器的介绍

    这里主要是对css2中的选择器进行了一下总结!

  4. 系统建设 > 医疗集团CRM系统建设步骤与分析

    概述 医院客户关系管理系统(Customer Relationship Management,简称CRM)是一个完善的“以病人为中心”的管理系统,为集团/医院/总院分院/管理机构提供院前.院中.院后的 ...

  5. [翻译]lithium介绍

    什么是li3? 首创框架 li3 是第一个并且是唯一一个从PHP 5.3+建立起来的相当出色的php框架,而且破天荒的第一次引入全新技术,包括通过一组唯一,统一的api(接口)在关系型(relatio ...

  6. 荒废了很久的java以及微信公众平台今天拿起来看了看:这里有很好的教程

    我的微信公众号刚刚起步: ,感兴趣可以关注一下. 关于java开发微信公众号有一个很好的教程博客:推荐一下:http://blog.csdn.net/lyq8479/article/details/8 ...

  7. Oracle Forms 10g Tutorial Ebook Download - Oracle Forms Blog

    A step by step tutorial for Oracle Forms 10g development. This guide is helpful for freshers in Orac ...

  8. [Amazon] Amazon IAP for Unity

    1> 下载amazon IAP3.0 for unity plugin 2> 根据 https://developer.amazon.com/public/apis/earn/in-app ...

  9. Web墨卡托投影(转)

    Google Maps地图投影全解析(1):Web墨卡托投影 Google Maps.Virtual Earth等网络地理所使用的地图投影,常被称作Web Mercator或Spherical Mer ...

  10. 基本shell命令使用笔记

    linux常用命令: (ls:列出目录内容) -a/-all 列出所有文件,包括隐藏文件 -l 使用长格式显示详细信息,包括rwx (mkdir:建立目录) -p/-parents 若要建立目录的上层 ...