工作需求----表单select多选交互
由于工作需求接触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多选交互的更多相关文章
- 工作需求----表单多选框checkbox交互
关于多选框,反选及选取几个: 1.html内容 <!--begin checkbox--> <div class="c_n_manage_tablexx"> ...
- SpreadJS V13.0发布,聚焦表单设计与数据交互,让您的工作效率突飞猛进!
纯前端表格控件SpreadJS,是一款成功应用于华为.招商银行.天弘基金.苏宁易购等国内外知名企业的前端开发工具,其带来的价值不仅体现在帮助开发人员在其Web应用程序中快速构建 Web Excel . ...
- PHP基础班初学心得:用JQ实现表单的全选、反选、取消和删除功能
摘要: 本人刚参加PHP基础班培训,由于之前毫无基础,分享的心得可能不规范,方法也许也"旁门左道",不能保证质量,只作自己总结学习,也希望能帮助到同样是初学者的朋友们,共同进步. ...
- form表单select联动
下拉列表:二级联动菜单 Select对象的常用属性 options[]:返回所有option组成的一个数组: name:名称 value:option的value的值 length:设置或读取opti ...
- form表单获取多选的值
flask 中 form 表单直接获取多选框的值时 language = request.values.getlist('values')或 language=request.from.getlist ...
- Django forms表单 select下拉框的传值
今儿继续做项目,学习了Django的forms生成前端的代码. forms.py class SignupForm(forms.Form): username = forms.CharField(va ...
- JavaScript实现表单的全选,反选,获取值
构思 通过for循环和for in循环来实现,界面效果如下 步骤 全选: 循环给所有的表单设置checked 反选: 循环内判断checked是否为true,如果为true则改为false否则改为tr ...
- Form表单之复选框checkbox操作
input复选(checkbox): <label>input复选1组:</label> <input type="checkbox" name=&q ...
- 实现一个兼容eleUI form表单的多选组件
本质上是实现了一个eleUI select组件中的创建条目功能的组件,仅仅是将dropdown的选择框变成了label形式.支持eleUI的form表单校验,同时组件也提供了组件内自定义校验的方法.常 ...
随机推荐
- angularJS之$watch的一个小介绍
现在最近公司项目使用angularJS进行开发:以前也接触过但是不多,趁着现在熟悉回来. 如题,angular中$watch也是我们在开发的时候需要的各种监听: $watch接收3个参数,第一个是对象 ...
- mongoose操作汇总。嘻嘻
MongoDb 命令查询所有数据库列表 CODE: > show dbs 如果想查看当前连接在哪个数据库下面,可以直接输入db CODE: > db Admin 想切换到test数 ...
- MATLAB地图工具箱学习总结(四)自定义投影
MATLAB地图工具箱学习总结(四)自定义投影 这是本系列的最后一篇文章,准备给大家讲讲自定义投影怎么做.在做这项作业的时候,自己也是花了不少时间,将所有地图投影源文件都看了一遍,简单分析了一下源代码 ...
- word域3
WORD是文字处理软件,我们在日常处理一些文字时经常遇到一些问题,如:各种公式的录入,尽管Word都提供了"公式编辑器",但其插入的却是"对象",有时排版会感觉 ...
- R中数据拆分和整合
library(data.table)ID <- c(NA,1,2,2)IDTime <- c(1,2,NA,1)TimeX1 <- c(5,3,NA,2)X1X2 <- c( ...
- 怎样设置域名带www和不带www都可以访问
1,域名解析添加两条A记录 2,IIS域名绑定添加两个主机头
- 使用react做的聊天对话列表
刚刚接触react 可能写的地方有错误或者不完善的地方欢迎大家给指正 下面开始正题 首先分析页面基于react的特性--把页面中所有显示内容看做模块加载 本页面可以看做一个大的模块,我们暂且命名为 ...
- eclipse绘制activiti无法生成图形
今天使用eclipse绘制acitiviti,发现无法绘制图形,设置里面勾选也勾选了,同时activiti插件也是最新的,最后发现同时打开了两个eclipse窗口就不支持生成图形,看来只能开一个窗口了 ...
- Linux新建用户并添加到sudo组
原文参考链接:https://www.douban.com/note/338488349/ 以在kali 下添加一个test用户为例: Step1#:添加新用户useradd -r -m -s /bi ...
- ROS学习笔记(二)——ubantu 14.04 安装
0.采用双系统安装(U盘安装) 1.安装文件在ubantu官网下载: ubantu官网 :https://www.ubuntu.com/ ubuntu的server版和desktop版有什么区? (来 ...