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实现的文字向上跑动类似跑马灯的效果
Jun 17 Javascript
JavaScript操作HTML DOM节点的基础教程
Mar 11 Javascript
url中的特殊符号有什么含义(推荐)
Jun 17 Javascript
JS添加删除DIV的简单实例
Jul 08 Javascript
老生常谈js动态添加事件--- 事件委托
Jul 19 Javascript
JavaScript实现的XML与JSON互转功能详解
Feb 16 Javascript
javascript编程实现栈的方法详解【经典数据结构】
Apr 11 Javascript
强大的 Angular 表单验证功能详细介绍
May 23 Javascript
浅谈node模块与npm包管理工具
Jan 03 Javascript
vue项目实现记住密码到cookie功能示例(附源码)
Jan 31 Javascript
jsonp跨域获取数据的基础教程
Jul 01 Javascript
微信小程序模板template简单用法示例
Dec 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 字符串替换的方法
2012/01/10 PHP
PHP实现的连贯操作、链式操作实例
2014/07/08 PHP
新浪微博OAuth认证和储存的主要过程详解
2015/03/27 PHP
phpStudy中升级MySQL版本到5.7.17的方法步骤
2017/08/03 PHP
PHP面向对象程序设计重载(overloading)操作详解
2019/06/13 PHP
如何快速的呈现我们的网页的技巧整理
2007/07/01 Javascript
google地图的路线实现代码
2009/08/20 Javascript
javascript与CSS复习(三)
2010/06/29 Javascript
精通Javascript系列之数据类型 字符串
2011/06/08 Javascript
js中的referrer返回上一页使用介绍
2013/09/26 Javascript
全面解析Javascript无限添加QQ好友原理
2016/06/15 Javascript
Node.js Streams文件读写操作详解
2016/07/04 Javascript
Javascript中apply、call、bind的巧妙使用
2016/08/18 Javascript
js自定义QQ菜单效果
2017/01/10 Javascript
Angular中支持SCSS的方法
2017/11/18 Javascript
JS实现前端页面的搜索功能
2018/06/12 Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
2018/09/21 Javascript
jQuery实现的隔行变色功能【案例】
2019/02/18 jQuery
微信小程序保存图片到相册权限设置
2020/04/09 Javascript
JavaScript直接调用函数与call调用的区别实例分析
2020/05/22 Javascript
npm全局环境变量配置详解
2020/12/15 Javascript
Python中的特殊语法:filter、map、reduce、lambda介绍
2015/04/14 Python
Linux中安装Python的交互式解释器IPython的教程
2016/06/13 Python
WIn10+Anaconda环境下安装PyTorch(避坑指南)
2019/01/30 Python
Python 使用指定的网卡发送HTTP请求的实例
2019/08/21 Python
Python进程间通信 multiProcessing Queue队列实现详解
2019/09/23 Python
欧迪办公美国官网:Office Depot
2016/08/22 全球购物
美国最大的在线生存商店:Survival Frog
2020/12/13 全球购物
外贸业务员求职自荐信分享
2013/09/21 职场文书
新闻专业大学生找工作的自我评价
2013/10/30 职场文书
物业客服专员岗位职责
2013/11/30 职场文书
五月的鲜花活动方案
2014/08/21 职场文书
领导干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2015元旦感言
2015/12/09 职场文书
详解Vue slot插槽
2021/11/20 Vue.js
Python列表的索引与切片
2022/04/07 Python