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 相关文章推荐
prototype与jquery下Ajax实现的差别
Sep 13 Javascript
基于jquery的横向滚动条(滑动条)
Feb 24 Javascript
jQuery 网易相册鼠标移动显示隐藏效果实现代码
Mar 31 Javascript
各种页面定时跳转(倒计时跳转)代码总结
Oct 24 Javascript
js使下拉列表框可编辑不止是选择
Dec 12 Javascript
jQuery选择器源码解读(五):tokenize的解析过程
Mar 31 Javascript
jQuery实现鼠标划过修改样式的方法
Apr 14 Javascript
轻松掌握JavaScript状态模式
Sep 07 Javascript
javascript输出AscII码扩展集中的字符方法
Dec 26 Javascript
bootstrap table 数据表格行内修改的实现代码
Feb 13 Javascript
走进AngularJs之过滤器(filter)详解
Feb 17 Javascript
JS自定义对象创建与简单使用方法示例
Jan 15 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
ThinkPHP中URL路径访问与模块控制器之间的关系
2014/08/23 PHP
PHP实现服务器状态监控的方法
2014/12/09 PHP
使用PHP生成PDF方法详解
2015/01/23 PHP
Laravel框架实现多数据库连接操作详解
2019/07/12 PHP
Laravel框架Auth用户认证操作实例分析
2019/09/29 PHP
js实现拖拽 闭包函数详细介绍
2012/11/25 Javascript
jQuery之过滤元素操作小结
2013/11/30 Javascript
jQuery中first()方法用法实例
2015/01/06 Javascript
JQuery中DOM事件冒泡实例分析
2015/06/13 Javascript
js预加载图片方法汇总
2015/06/15 Javascript
基于jQuery实现仿百度首页换肤背景图片切换代码
2015/08/25 Javascript
一分钟理解js闭包
2016/05/04 Javascript
浅析Bootstrap表格的使用
2016/06/23 Javascript
jQuery checkbox选中问题之prop与attr注意点分析
2016/11/15 Javascript
jQuery手风琴的简单制作
2017/05/12 jQuery
微信小程序实现图片上传、删除和预览功能的方法
2017/12/18 Javascript
JS解析后台返回的JSON格式数据实例
2018/08/06 Javascript
详解处理Vue单页面应用SEO的另一种思路
2018/11/09 Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
2020/11/11 Javascript
python调用cmd命令行制作刷博器
2014/01/13 Python
Python求解平方根的方法
2015/03/11 Python
python监控键盘输入实例代码
2018/02/09 Python
了解不常见但是实用的Python技巧
2019/05/23 Python
利用Python库Scapy解析pcap文件的方法
2019/07/23 Python
Python的bit_length函数来二进制的位数方法
2019/08/27 Python
Python使用文件操作实现一个XX信息管理系统的示例
2020/07/02 Python
Html5之webcoekt播放JPEG图片流
2020/09/22 HTML / CSS
定制别致的瑜伽垫:Sugarmat
2019/06/21 全球购物
语文课外活动总结
2014/08/27 职场文书
党员学习群众路线教育实践活动对照检查材料
2014/09/23 职场文书
2014年应急工作总结
2014/12/11 职场文书
想要创业,那么你做好准备了吗?
2019/07/01 职场文书
职业生涯规划书之大学四年
2019/08/07 职场文书
OpenCV绘制圆端矩形的示例代码
2021/08/30 Python
python和C/C++混合编程之使用ctypes调用 C/C++的dll
2022/04/29 Python
nginx sticky实现基于cookie负载均衡示例详解
2022/12/24 Servers