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的日期联动实现代码
Feb 24 Javascript
Jquery判断IE6等浏览器的代码
Apr 05 Javascript
javascript实现分栏显示小技巧附图
Oct 13 Javascript
JQuery查找DOM节点的方法
Jun 11 Javascript
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
Sep 14 Javascript
jQuery中使用animate自定义动画的方法
May 29 Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
Oct 08 Javascript
canvas滤镜效果实现代码
Feb 06 Javascript
解决iView中时间控件选择的时间总是少一天的问题
Mar 15 Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
Sep 04 Javascript
微信小程序swiper左右扩展各显示一半代码实例
Dec 05 Javascript
JavaScript架构搭建前端监控如何采集异常数据
Jun 25 Javascript
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
Yii入门教程之目录结构、入口文件及路由设置
2014/11/25 PHP
PHP中配置IIS7实现基本身份验证的方法
2015/09/24 PHP
关于PHP中Session文件过多的问题及session文件保存位置
2016/03/17 PHP
利用NodeJS的子进程(child_process)调用系统命令的方法分享
2013/06/05 NodeJs
firefox浏览器不支持innerText的解决方法
2013/08/07 Javascript
顶部缓冲下拉菜单导航特效的JS代码
2013/08/27 Javascript
javascript计算星座属相(十二生肖属相)示例代码
2014/01/09 Javascript
JavaScript设计模式之外观模式介绍
2014/12/28 Javascript
jQuery使用before()和after()在元素前后添加内容的方法
2015/03/26 Javascript
微信小程序 登陆流程详细介绍
2017/01/17 Javascript
jQuery实现select下拉框获取当前选中文本、值、索引
2017/05/08 jQuery
自定义Vue中的v-module双向绑定的实现
2019/04/17 Javascript
nodejs实现日志读取、日志查找及日志刷新的方法分析
2019/05/20 NodeJs
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
2019/05/21 Javascript
Nodejs + sequelize 实现增删改查操作
2020/11/07 NodeJs
Python使用urllib2获取网络资源实例讲解
2013/12/02 Python
Python2.x版本中maketrans()方法的使用介绍
2015/05/19 Python
浅谈python实现Google翻译PDF,解决换行的问题
2018/11/28 Python
Python参数类型以及常见的坑详解
2019/07/08 Python
快速解决jupyter notebook启动需要密码的问题
2020/04/21 Python
matplotlib交互式数据光标实现(mplcursors)
2021/01/13 Python
html5指南-3.如何实现html元素拖拽功能
2013/01/07 HTML / CSS
澳大利亚在线奢侈品时尚零售平台:Azura Runway
2021/01/13 全球购物
俄罗斯家居用品购物网站:Евродом
2020/11/21 全球购物
意大利在线高尔夫商店:Online Golf
2021/03/09 全球购物
2014的自我评价
2014/01/13 职场文书
运动会入场解说词300字
2014/01/25 职场文书
关于环保的标语
2014/06/13 职场文书
2014年辅导员工作总结
2014/11/18 职场文书
史上最牛的辞职信
2015/02/28 职场文书
2015年校本培训工作总结
2015/07/24 职场文书
简短的36句中秋节祝福信息语句
2019/09/09 职场文书
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/04/22 无线电
MySQL8.0.18配置多主一从
2021/06/21 MySQL
如何给HttpServletRequest增加消息头
2021/06/30 Java/Android
Java实现贪吃蛇游戏的示例代码
2022/09/23 Java/Android