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 相关文章推荐
JS操作数据库的实例代码
Oct 17 Javascript
JS对象转换为Jquery对象实现代码
Dec 29 Javascript
浏览器中url存储的JavaScript实现
Jul 07 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
Dec 18 Javascript
javascript中Date对象的使用总结
Nov 21 Javascript
微信小程序 开发之快递查询功能的实现
Jan 09 Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
Mar 09 Javascript
在JS中如何把毫秒转换成规定的日期时间格式实例
May 11 Javascript
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解
Sep 21 Javascript
JS实现动态倒计时功能(天数、时、分、秒)
Dec 12 Javascript
JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
Feb 12 Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
Jun 04 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
使用PHP导出Redis数据到另一个Redis中的代码
2014/03/12 PHP
PHP的openssl加密扩展使用小结(推荐)
2016/07/18 PHP
php 从指定数字中获取随机组合的简单方法(推荐)
2017/04/05 PHP
10个基于Jquery的幻灯片插件教程
2010/10/29 Javascript
jQuery提交表单ajax查询实例代码
2012/10/07 Javascript
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
2013/05/19 Javascript
手机开发必备技巧:javascript及CSS功能代码分享
2015/05/25 Javascript
基于javascript实现图片左右切换效果
2016/01/25 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
2016/04/21 Javascript
浅谈JavaScript中的分支结构
2016/07/01 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
2017/02/07 Javascript
使用D3.js构建实时图形的示例代码
2018/08/28 Javascript
iView-admin 动态路由问题的解决方法
2018/10/03 Javascript
this.$toast() 了解一下?
2019/04/18 Javascript
ES6 Object属性新的写法实例小结
2019/06/25 Javascript
layui 数据表格复选框实现单选功能的例子
2019/09/19 Javascript
Python实现从订阅源下载图片的方法
2015/03/11 Python
在PyCharm中实现关闭一个死循环程序的方法
2018/11/29 Python
python实现各种插值法(数值分析)
2019/07/30 Python
Mac安装python3的方法步骤
2019/08/09 Python
python 中的[:-1]和[::-1]的具体使用
2020/02/13 Python
Django接收照片储存文件的实例代码
2020/03/07 Python
Python判断字符串是否为合法标示符操作
2020/09/03 Python
小蚁科技官方商店:YI Technology
2019/08/23 全球购物
美国球迷装备的第一来源:FOCO
2020/07/03 全球购物
一套C#面试题
2013/10/09 面试题
初入社会应届生求职信
2013/11/18 职场文书
优秀毕业生求职推荐信范文
2013/11/21 职场文书
不假外出检讨书
2014/01/27 职场文书
硕士生找工作求职信
2014/07/05 职场文书
中学生勤俭节约倡议书
2015/04/29 职场文书
2015年科普工作总结
2015/07/23 职场文书
2015年学校消防安全工作总结
2015/10/14 职场文书
社区结对共建协议书
2016/03/23 职场文书
Mysql效率优化定位较低sql的两种方式
2021/05/26 MySQL
Flutter Navigator 实现路由传递参数
2022/04/22 Java/Android