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 相关文章推荐
腾讯UED 漂亮的提示信息效果代码
Sep 12 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
Apr 12 Javascript
jQuery的animate函数实现图文切换动画效果
May 03 Javascript
javascript设计模式--策略模式之输入验证
Nov 27 Javascript
深入理解js函数的作用域与this指向
May 28 Javascript
jQuery 获取页面li数组并删除不在数组中的key
Aug 02 Javascript
jQuery zTree树插件简单使用教程
Jan 10 Javascript
JS按钮闪烁功能的实现代码
Jul 21 Javascript
vue 页面加载进度条组件实例
Feb 05 Javascript
10个最受欢迎的 JavaScript框架(推荐)
Apr 24 Javascript
angularjs模态框的使用代码实例
Dec 20 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 Vue.js
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目录管理函数小结
2008/09/10 PHP
优化PHP程序的方法小结
2012/02/23 PHP
php中mysql连接和基本操作代码(快速测试使用,简单方便)
2014/04/25 PHP
Yii调试SQL的常用方法
2014/07/09 PHP
分享3个php获取日历的函数
2015/09/25 PHP
最新最全PHP生成制作验证码代码详解(推荐)
2016/06/12 PHP
yii2控制器Controller Ajax操作示例
2016/07/23 PHP
Thinkphp5.0 框架的请求方式与响应方式分析
2019/10/14 PHP
Js+php实现异步拖拽上传文件
2015/06/23 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
2015/09/04 Javascript
JavaScript动态创建form表单并提交的实现方法
2015/12/10 Javascript
基于jQuery实现放大镜特效
2020/10/19 Javascript
JavaScript Promise 用法
2016/06/14 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
2016/07/25 Javascript
轻松搞定js表单验证
2016/10/13 Javascript
JavaScript中的await/async的作用和用法
2016/10/31 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
2016/12/08 Javascript
微信小程序 页面跳转传值实现代码
2017/07/27 Javascript
JS排序算法之希尔排序与快速排序实现方法
2017/12/12 Javascript
js原生实现移动端手指滑动轮播图效果的示例
2018/01/02 Javascript
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
2019/04/02 Javascript
Nodejs异步流程框架async的方法
2019/06/07 NodeJs
详解Vue 的异常处理机制
2020/11/30 Vue.js
[02:40]DOTA2英雄基础教程 巨牙海民
2013/12/23 DOTA
[03:12]完美世界DOTA2联赛PWL DAY7集锦
2020/11/06 DOTA
python遍历序列enumerate函数浅析
2017/10/17 Python
Python数据分析:手把手教你用Pandas生成可视化图表的教程
2018/12/15 Python
Python 给下载文件显示进度条和下载时间的实现
2020/04/02 Python
python excel多行合并的方法
2020/12/09 Python
python中append函数用法讲解
2020/12/11 Python
苹果中国官方网站:Apple中国
2016/07/22 全球购物
介绍一些UNIX常用简单命令
2014/11/11 面试题
市三好学生主要事迹
2014/01/28 职场文书
销售开票员岗位职责
2015/04/15 职场文书
python基于tkinter实现gif录屏功能
2021/05/19 Python
Java使用jmeter进行压力测试
2021/07/09 Java/Android