jQuery取得select选择的文本与值的示例


Posted in Javascript onDecember 09, 2013

获取select :
获取select 选中的 text :
$("#ddlregtype").find("option:selected").text();

获取select选中的 value:
$("#ddlregtype ").val();

获取select选中的索引:
$("#ddlregtype ").get(0).selectedindex;

设置select:
设置select 选中的索引:
$("#ddlregtype ").get(0).selectedindex=index;//index为索引值

设置select 选中的value:

$("#ddlregtype ").attr("value","normal“); 
$("#ddlregtype ").val("normal"); 
$("#ddlregtype ").get(0).value = value;

设置select 选中的text:
var count=$("#ddlregtype option").length; 
for(var i=0;i<count;i++) 
{ if($("#ddlregtype ").get(0).options[i].text == text) 
{ 
$("#ddlregtype ").get(0).options[i].selected = true; 
break; 
} 
} 
$("#select_id option[text='jquery']").attr("selected", true);

设置select option项:
$("#select_id").append("<option value='value'>text</option>"); //添加一项option 
$("#select_id").prepend("<option value='0'>请选择</option>"); //在前面插入一项option 
$("#select_id option:last").remove(); //删除索引值最大的option 
$("#select_id option[index='0']").remove();//删除索引值为0的option 
$("#select_id option[value='3']").remove(); //删除值为3的option 
$("#select_id option[text='4']").remove(); //删除text值为4的option

清空 select:

$("#ddlregtype ").empty();

工作需要,要获得两个表单中的值。如图:

如何获得从左边选择框添加到右边选择框中的值?我想了想用网页特效可以获得,这里用了比较流行的jquery。
js代码如下:

//获取所有属性值 var item = $("#select1").val(); 
$(function(){ 
$('#select1').each( //获得select1的所有值 
function(){ 
$('button').click(function(){ 
alert($('#select2').val()); //获得select2中的select1值 
}); 
}); 
}) 
</script>

值得注意的是,不能直接写成
$(function(){ 
$('#select2').each( //获得select1的所有值,因为前面讲选项从左边添加到右边,jquery其实并没有真正将值从左边传到右边。 
function(){ 
$('button').click(function(){ 
alert($(this).val()); //获得select2中的select1值 
}); 
}); 
})

html:
<div class="centent"> 
<select multiple="multiple" id="select1" name="dd" style="width:100px;height:160px;"> 
<option value="1">选项1</option> 
<option value="2">选项2</option> 
<option value="3">选项3</option> 
<option value="4">选项4</option> 
<option value="5">选项5</option> 
<option value="6">选项6</option> 
<option value="7">选项7</option> 
</select> 
<div> 
<span id="add" >选中添加到右边>></span> 
<span id="add_all" >全部添加到右边>></span> 
</div> 
</div> 
<div class="centent"> 
<select multiple="multiple" id="select2" name="sel" style="width: 100px;height:160px;"> 
</select> 
<div> 
<span id="remove"><<选中删除到左边</span> 
<span id="remove_all"><<全部删除到左边</span> 
</div> 
</div>

使用JQuery,Ajax调用动态填充Select的option选项
//绑定ClassLevel1单击事件 
$("#ClassLevel1").change(function () { 
var id = $("#ClassLevel1").val(); 
var level2 = $("#ClassLevel2"); 
level2.empty(); 
$("#ClassLevel3").hide(); 
$.ajax({ 
url: "./askCommon.ashx?action=getclasslevel&pid=" + id, 
data: { "type": "ajax" }, 
datatype: "json", 
type: "get", 
success: function (data) { 
var json = eval_r(data); 
for (var ind in json) { 
level2.append($("<option value='" + json[ind].id + "'>" + json[ind].typename + "</option>")); 
} } 
}); 
})
Javascript 相关文章推荐
jquery监控数据是否变化(修正版)
Apr 12 Javascript
css+js实现部分区域高亮可编辑遮罩层
Mar 04 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
Apr 12 Javascript
jQuery异步加载数据并添加事件示例
Aug 24 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
Mar 05 Javascript
自动适应iframe右边的高度
Dec 22 Javascript
JavaScript使用简单正则表达式的数据验证功能示例
Jan 13 Javascript
package.json文件配置详解
Jun 15 Javascript
vue-router 前端路由之路由传值的方式详解
Apr 30 Javascript
vue实现pdf文档在线预览功能
Nov 26 Javascript
vue全屏事件开发详解
Jun 17 Javascript
vue项目支付功能代码详解
Feb 18 Vue.js
JavaScript—window对象使用示例
Dec 09 #Javascript
使用js实现按钮控制文本框加1减1应用于小时+分钟
Dec 09 #Javascript
跨域传值即主页面与iframe之间互相传值
Dec 09 #Javascript
深入理解JavaScript中的传值与传引用
Dec 09 #Javascript
js Array操作的最简短最容易理解方法
Dec 09 #Javascript
javascript放大镜效果的简单实现
Dec 09 #Javascript
javascript贪吃蛇完整版(源码)
Dec 09 #Javascript
You might like
PHP面向对象概念
2011/11/06 PHP
让ThinkPHP支持大小写url地址访问的方法
2014/10/31 PHP
PHP实现的浏览器检查类
2016/04/11 PHP
PHP实现的权重算法示例【可用于游戏根据权限来随机物品】
2019/02/15 PHP
解决tp5在nginx下修改配置访问的问题
2019/10/16 PHP
JQuery中each()的使用方法说明
2010/08/19 Javascript
在JavaScript中获取请求的URL参数[正则]
2010/12/25 Javascript
Javascript的常规数组和关联数组对比小结
2012/05/24 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
2012/07/31 Javascript
javascript删除字符串最后一个字符
2014/01/14 Javascript
JS对象转换为Jquery对象示例
2014/01/26 Javascript
js登录弹出层特效
2014/03/07 Javascript
Jquery 获取指定标签的对象及属性的设置与移除
2014/05/29 Javascript
js中键盘事件实例简析
2015/01/10 Javascript
AngularJS 实现JavaScript 动画效果详解
2016/09/08 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
2016/12/13 Javascript
解决option标签selected=&quot;selected&quot;属性失效的问题
2017/11/06 Javascript
LayUI动态设置checkbox不显示的解决方法
2019/09/02 Javascript
Perl中著名的Schwartzian转换问题解决实现
2015/06/02 Python
简单谈谈Python中的闭包
2016/11/30 Python
基于python中的TCP及UDP(详解)
2017/11/06 Python
Python numpy实现数组合并实例(vstack,hstack)
2018/01/09 Python
python OpenCV GrabCut使用实例解析
2019/11/11 Python
详解tensorflow2.x版本无法调用gpu的一种解决方法
2020/05/25 Python
Python编写memcached启动脚本代码实例
2020/08/14 Python
深入浅析pycharm中 Make available to all projects的含义
2020/09/15 Python
漫威玩具服装及周边商品官方购物网站:Marvel Shop
2019/05/11 全球购物
环境工程专业个人求职信
2013/12/05 职场文书
社区安全检查制度
2014/02/03 职场文书
挖掘机司机岗位职责
2014/02/12 职场文书
企业百日安全活动总结
2015/05/07 职场文书
趣味运动会加油词
2015/07/18 职场文书
Canvas跟随鼠标炫彩小球的实现
2021/04/11 Javascript
AI:如何训练机器学习的模型
2021/04/16 Python
python 制作一个gui界面的翻译工具
2021/05/14 Python
Win11怎么跳过联网验机 ?Win11跳过联网验机激活教程
2022/04/05 数码科技