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 相关文章推荐
javascript当中的代码嗅探扩展原生对象和原型(prototype)
Jan 11 Javascript
jquery图片放大功能简单实现
Aug 01 Javascript
js格式化货币数据实现代码
Sep 04 Javascript
jquery(hide方法)隐藏指定元素实例
Nov 11 Javascript
js实现的折叠导航示例
Nov 29 Javascript
JavaScript中Function()函数的使用教程
Jun 04 Javascript
javascript合并表格单元格实例代码
Jan 03 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
Feb 15 Javascript
原生JS实现跑马灯效果
Feb 20 Javascript
使用JS编写的随机抽取号码的小程序
Aug 11 Javascript
jQuery的Ajax接收java返回数据方法
Aug 11 jQuery
详解微信小程序开发聊天室—实时聊天,支持图片预览
May 20 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文件与目录操作示例
2016/12/24 PHP
php str_getcsv把字符串解析为数组的实现方法
2017/04/05 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
JavaScript 原型继承
2011/12/26 Javascript
JS 控件事件小结
2012/10/31 Javascript
innerText和textContent对比及使用介绍
2013/02/27 Javascript
Js base64 加密解密介绍
2013/10/11 Javascript
深入理解JavaScript高级之词法作用域和作用域链
2013/12/10 Javascript
jquery 提示信息显示后自动消失的具体实现
2013/12/18 Javascript
jQuery插件pagination实现分页特效
2015/04/12 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
2015/10/08 Javascript
Bootstrap企业网站实战项目4
2016/10/14 Javascript
JS搜狐面试题分析
2016/12/16 Javascript
微信小程序教程系列之新建页面(4)
2017/04/17 Javascript
Vue filter介绍及详细使用
2018/04/04 Javascript
vue使用Google地图的实现示例代码
2018/12/19 Javascript
sharp.js安装过程中遇到的问题总结
2020/04/02 Javascript
python的几种开发工具介绍
2007/03/07 Python
Python 获得13位unix时间戳的方法
2017/10/20 Python
Diango + uwsgi + nginx项目部署的全过程(可外网访问)
2018/04/22 Python
flask-socketio实现WebSocket的方法
2018/07/31 Python
利用Pyhton中的requests包进行网页访问测试的方法
2018/12/26 Python
Python3.5内置模块之os模块、sys模块、shutil模块用法实例分析
2019/04/27 Python
Python 下载及安装详细步骤
2019/11/04 Python
浅谈keras 的抽象后端(from keras import backend as K)
2020/06/16 Python
HTML5到底会有什么发展?HTML5的前景展望
2015/07/07 HTML / CSS
moosejaw旗下的户外商品促销网站:Mountain Steals
2017/02/27 全球购物
团组织关系介绍信
2014/01/12 职场文书
构建高效课堂实施方案
2014/03/13 职场文书
个人承诺书格式
2014/06/03 职场文书
质量主管工作职责
2014/09/26 职场文书
2014年小学生迎国庆65周年演讲稿
2014/09/27 职场文书
领导干部查摆“四风”问题自我剖析材料思想汇报
2014/10/05 职场文书
医学生自荐信范文
2015/03/05 职场文书
老干部座谈会主持词
2015/07/03 职场文书
详解CSS开发过程中的20个快速提升技巧
2021/05/21 HTML / CSS