由于工作需求接触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,iVBORw0KGgoAAAANSUhEUgAAAYwAAAB9CAIAAAA+4sMVAAAKmklEQVR4nO3dQYvTTACA4fyjHPb3zJ9Y+RZBQfA2FwU9iBe7noQ9BQRx9aBFTyL0kkOPCx4Us91dd13wNt9hkslkMsmmHdqkyftQxG3TWmr6MjNJu5ECgAGL+n4CANCGSAEYNCIFYNCIFIBBI1IABo1IARg0IgVg0IgUgEEjUgAGjUgBGDQiBWDQiBSAQSNSAAaNSAEYNCIFYNCIFIBBI1KhvmNP9L2nYENEKhR7/+79+/fvx48fP3/+XK1Wl5arqyv9p/Hnz5/r6+vfv3/z37S/iFQo9v7dI1KTQqRCsffvHpGaFCIVir1/94jUpBCpUJ69PxGRSO66XyJimTb+aD1U1OHBJoZITQqRClXb+1MZR01EooqGJcK6KpVxHMdWjIpbi0CZn2mWIlITQ6RCuXt/ZUiUyrg+QCoiVd5ismX64w7GzM+pjIlUU6RWq1WWZavVikiNCZEKVd37nbjUI1UbZ8UykbEQIpapSmWc390ZOZUPS6RUQ6TOz8+zLHvw4IHdKSI1AkQqlL33pzIWSct0z7fsVPQnH1nlEXJGVeUP+aNPO1T1SOlC3bt379GjR8+ePTOdIlIjQKRC+dak7KTUwqRrlAi3Rc5GE+9QKydSulD//feflPL169cnJydv3rzRnSJSI0CkQm0WqfyoXSIiIYRntFWZ7klnbOY9DjglTqSyLHv69Onx8fHbt28/fvz4+fPnr1+/fvr0KcsyIjUCRCqUtfe3Hdcr+6L7Y47vWQOmcknKHUlZq+wN5ypMinckVcdIahyIVKjWvb95ulf8PbIXsRpu0BNDPUlkFqg4BWFiiFSoDSJVGVsV50k5iXKmdSZkNEoRqYkhUqHWjpStMjJKRGRN6qxzDuxe5f2adquI1KQQqVDs/btHpCaFSIVi7989IjUpRCoUe//uEalJIVKhvn//rqKIS48XIjVuRCqUjtTBS8VlZxd7JEWkRo9IhSJSRApbRaRCeSM1v1Wzl+rgpZplan7qf6cdnimVNbwPF+Xjm7svVcNDLZRSarnovx1ECttApEK1RepUZbfqsPnNdnimsrOG7mR5mEzslpkbtWXxHMw2xribRaQmhUiFqkTqVGVZGSm7Grna0Gl+6xsf6Ugt8oSZMdcsq0TNJOzAhGyRb0+kiNRoEKlQjZGqzsKa5n1L5Zv0LZTKirsslLKGYzNrPLW0nsbMahaRIlJjQqRCNUVqmam5NZtrGTF5biqun/kmjGZgZY+kllYQD8+UUs0LXvt/IVKTQqRCtUz3Dl6qpRn1+Ban5rdquShXoJxIldcvytjZj+NM96ZzIVKTQqRCtUfKTNk8C+TWPM4dTDkL582RMuZn1afVumC/7xciNSlEKlQ9Urods+o19bmePUFzB1PVSNkHAVtGUuVN3iaO6EKkJoVIhbIjpReDZtZI6qBhadw5TudeY86TKg7qlWdLOZE6VfoQop42Zme+yePoLkRqUohUqJbzpHSz8iN01mBqfuvvyPy26JQdmurRPROp/PwG66bDYsY37kN7RGpqiFSopkjVz73UbaqPoTydWlTOM/DP6arnHChVPmzer/GOp4jUpBCpUHx2j0hhq4hUKCJFpLBVRCoUkSJS2CoiFYpIESlsFZEKRaSIFLaKSIUiUkQKW0WkQrmRqp1L6flOgvoZ4acqy8rvWuFCpGAQqVCNkSr+0j1SBxP+zDCRQhMiFapTpIpvv8tPOteRKj7R4hrvSZhEChsgUqHsSM1vy+tni8pms+IjeOU29hcV3PVFw1yI1GQRqVD+kZQeJVWne+X3sRTTPfNdK/PT/PMuLEsRKTiIVKjua1LlVyNYkZoV8cq/0oDxFJFCFZEKtcaaVO37nuyRlP5MMsMoIgUHkQq11tG98ps2M3fQNMtG/nWaRAqbIVKhPJFSSunv83UiVczm7K/uNN+yslTFIT9SRaRgIVKh6kf38tXx4tSnSr+s3w2jv/VJz/vmt2p5pjK9LMUpCEQKFiIVquVjMfYZCZr3V+/lvzPm5RR/YTqRwp2IVCg+u0eksFVEKhSRIlLYKiIVikgRKWwVkQqlI9X3s5gWIjUpvLtC5ZHi0t+FSI0bkQrF3r979kjq0kKkRolIhXL3/lTGsUyrV4jE3iIRUYV1a21b+BCpSSFSoVoilYhIJL5IWRXLb9WbEqluiNSkEKlQnkjlo6Om8BCpUERqUohUqMren4hYiDiWiRRCxFFNLFP/dI9IrYNITQqRCmXv/amMhZRxLNNUxsVak3cklRRXMpLagBOp8/PzzGe1WhGpESBSoay9P5VxLJM7F859VxKpdTiRyrLs4cOHR0dHR0dH9+/ff/z48YsXL05OTrIsI1IjQKRCNS2cu5O6Yman16zcOSCRWod3JPXkyZPnz58fHx+/e/fuy5cvjKRGg0iFWv8UBKXMyMlsTqTWUV+T0p169erV+/fvv337pgvFmtQ4EKlQG0XKNIo1qU3oSP369evi4sKska9WqyzLPnz4YApFpMaBSIVaP1KpjCOzSZkr77bw0ZHKsuzy8vKP5eLi4vz8/OLiwlxzfX19c3NDpPYakQrlj5R3RSqKolhKEcUyLZemdK7M9tXAwUtHSsfoutXNzQ2R2ndEKhR7/+7pSF1dXdWTZMJkI1J7jUiFYu/fPR2peo/+/v2r/3QQqb1GpEKx9++ejlQ9Rk2I1F4jUqHY+3dPR+r3Ovhv2l9EKtR37Im+9xRsiEgBGDQiBWDQiBSAQSNSAAaNSAEYNCIFYNCIFIBBI1IABo1IARg0IgVg0IgUgEGrRSqKuDReAOycL1Lw4pUB+kCkOuOVAfpApDrjlQH6QKQ645UB+kCkOuOVAfpApDrjlQH6QKQ645UB+kCkOuOVAfpApDrjlQH6QKQ645UB+kCkOuOVAfrQPVKpjEWilFIqEbFMGzeK8q1qEhHlzN0TETU8VCKiqPGRVCKc28onZ23jPnQqY5HU7toZkQL6sH6kUhk3Nkq13Z7noaxEIiIhnGaYkpXbGOWG5jGKv3SPlKdwHREpoA8dIpW/t8u3uMt9yzdkSsehaIcZc1VHU25BzM+VDHkjJURlmKb/oVTGtefre84dECmgD2tGqjoLa5j3NUzVEhGJJL9LrUwNI6eyWdZAztqgkkzd0Fim1jb2E7xrDHgHIgX0Yb1ICRFLacrUMmKSnpvy60Xiu18xsLJHUla7TJzsAZS+qjLdsx66zKHJVXnVJvM9IgX0Ye3pnlKJaFtA99VG5ZtXxkblve3H6RaQxjUpa1JYKZKOVyIifyI7IVJAHzaIVPn297zZy3lcLQbOwnljpMrpm3QWlOyjgk1rUtY2tZFUvhVH94A90jFSOgDFuzu/pt6oygTNHRVVI1WfmPnv40anupXn6J4VQSHqnWw65+FuRArow92RSmUc5TOmympRfUBSP+upck317IK2/BQL32Yl3NM7PTiStUjl8UvsqurHi6XMG7XZjI9IAX1Y+zypVMb5aKQyLClS5rlXsZGzJm6HqRxTuYfkzIE6axRnbVE/P6q6bJ+UU8BUxnoCKRLPWVUdECmgD+tFSginRHmbms8cV2Wnqmdx+ud01XMOnGWohnOynDOgvE/EOhO+/Vz2FkQK6AOf3euMVwboA5HqjFcG6MP/TusodRwmXNgAAAAASUVORK5CYII=" 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. 我的CSS布局之旅--持续更新

    虽然我也接触前端一年之久了,但是无奈从切图布局下来的经验还真是很不足,因为之前比赛或者是做小项目时全部都是自己负责设计,所以都是编写边设计,哎呀,也是醉了:或者是有模板,然后从人家上面扒拉下来的,真的 ...

  2. Android动态方式破解apk前奏篇(Eclipse动态调试smail源码)

    一.前言 今天我们开始apk破解的另外一种方式:动态代码调试破解,之前其实已经在一篇文章中说到如何破解apk了: Android中使用静态方式破解Apk  主要采用的是静态方式,步骤也很简单,首先使用 ...

  3. String高效编程优化(Java)

    1, substring截取超大字符串可能造成的“内存泄漏” 2,+ 操作符的优化和局限 3,StringBuilder和StringBuffer 4,split和StringTokenizer做简单 ...

  4. Android 开机自启服务

    package com.example.lenovo.guangbo; import android.app.Service; import android.content.Intent; impor ...

  5. iOS解决NSData转NSString后字符为空

    iOS中,将NSData转NSString的一般方法为[[NSString alloc] initWithData:data encoding:NSUTF8StringEncoding];但是当dat ...

  6. 兼容IE7音乐播放器之jplayer的使用

    首先列出为何要写这篇随笔的原因: 1:兼容IE7 2:音乐播放器 3:任意控制播放器 1: 最近做的网站需要兼容IE7,在此之前已经写好了关于音乐播放的插件,火狐,IE8以上,以及谷歌浏览器等都可以随 ...

  7. webpack详细配置讲解

    //常见的Webpack配置文件var webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugi ...

  8. Unity3d外包(北京)公司(长年承接U3D外包)

    我们制作各类型严肃游戏,虚拟现实,增强现实项目! 品质保证,售后完备. 联系请加QQ:372900288  电话:13911652504 我们团队成立于2011年10月,是一个专业从事严肃游戏研发的团 ...

  9. linux应用程序开发-进程程序设计

    学习之前必须了解基本的概念: 进程,线程,进程3种状态,进程调度以及4种算法,进程同步,死锁,记不清的找度娘. 获取ID #include<sys/types.h> #include< ...

  10. good design

    canvas 效果麦当劳40周年纪念日 效果图 McDonald's 40th Anniversary 交互效果很流畅,赞!