由于工作需求接触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. C#datagridview 防止闪烁的方法

    描述:拉动DataGridView滚动条时会出现闪烁,看起来像是在重画,感觉不是很好. 解决方式:采用双缓存机制,在方案中添加方法. 代码: public static class Extension ...

  2. 一个ubuntu phper的自我修养(atom)

    将atom打造成二十一世纪最装那啥的php IDE 之前在windows平台使用的php IDE一直是eclipse for php,因为之前做java开发,所以对eclipse很有感情,debug. ...

  3. 微信小程序-上传下载

    wx.uploadFile(OBJECT) 上传 将本地资源上传到开发者服务器.如页面通过 wx.chooseImage(图片)/wx.chooseVideo(视频) 等接口获取到一个本地资源的临时文 ...

  4. OpenCV从入门到放弃系列之——图像的基本操作

    读取.修改.保存图像 图像读取函数imread(); 图像颜色空间的转换cvtColor(); 图像保存至硬盘imwrite(); /********************************* ...

  5. Maven 配置 Selenium + testNG + reportNG 运行环境

    .markdown-preview:not([data-use-github-style]) { padding: 2em; font-size: 1.2em; color: rgb(56, 58, ...

  6. 事件委托和JQ事件绑定总结

    事件委托: 比喻:事件委托的事例在现实当中比比皆是.比如,有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三个人在公司门口等快递:二是委托给前台MM代为签收.现实当中,我们大都采用委托的方 ...

  7. Hibernate学习笔记(一)

    2016/4/18 19:58:58 Hibernate学习笔记(一) 1.Hibernate框架的概述: 就是一个持久层的ORM框架. ORM:对象关系映射.将Java中实体对象与关系型数据库中表建 ...

  8. python走起之第十一话

    Redis redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sorte ...

  9. java学习笔记----枚举测试题

    定义义一个交通灯枚举类,包含红灯.绿灯.黄灯,需要有获得下一个灯的方法,并实现红灯出现5秒之后变成绿灯,绿灯3秒之后变成黄灯,黄灯2秒之后变成红灯,如此循环 public class Test5 { ...

  10. 注册码_EditPlus3

    1.来自"http://jingyan.baidu.com/article/67508eb4d78cfe9cca1ce488.html" Name:  www.cnzz.cc Co ...