由于工作需求接触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. [课程设计]Scrum 3.2 多鱼点餐系统开发进度(页面优化&下单详细信息页面)

    Scrum 3.2 多鱼点餐系统开发进度(页面优化&下单详细信息页面)  1.团队名称:重案组 2.团队目标:长期经营,积累客户充分准备,伺机而行 3.团队口号:矢志不渝,追求完美 4.团队选 ...

  2. 关键字nullable,nonnull,null_resettable,_Null_unspecified详解

    相信在开发过程中,很多小伙伴们儿都会见到nullable,nonnull,null_resettable,_Null_unspecified这几个关键字,但是并不知道它们是什么意思,下面我就给大家一一 ...

  3. sqlserver2008一直显示正在还原

      sqlserver2008一直显示正在还原.如果不需要还原,则使用: restore database test with recovery如果只需要还原,则使用: restore databas ...

  4. 。net 之view筛选

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...

  5. Uva 1630 折叠串

    题目链接:https://uva.onlinejudge.org/external/16/1630.pdf 题意:折叠串,给一个字符串,相同部分可以折叠,折叠可以嵌套.求最短长度的一种折叠方法.括号和 ...

  6. 深入了解try catch

    @Test public void testWeiXin(){ System.out.println(task()); } private boolean task(){ try { int i = ...

  7. Hadoop 简介

    一个开源的,高可靠,可扩展的分布式计算框架 解决的问题 1 海量数据的存储(HDFS) 2海量数据的分析(Mapreduce) 3 分布式资源调度 (Yarn) 应用场景 日志分析,基于海量数据的在线 ...

  8. c语言简易文法

    <程序>→<外部声明>|<程序><外部声明> <外部声明>→<函数定义>|<声明> <函数定义>→< ...

  9. python 最小公倍数

    最小公倍数 求解两个整数(不能是负数)的最小公倍数 方法一:穷举法 def LCM(m, n): if m*n == 0: return 0 if m > n: lcm = m else: lc ...

  10. 子坐标系C在父坐标系W中的旋转问题

    关键词:空间旋转.旋转轴.刚体旋转 用途:相机位姿估计.无人机位姿估计 文章类型:概念.公式总结(本文不带推倒过程,若想了解公式是如何推出来的请自习搜索文献),C++函数展示 @Author:VSha ...