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 写类方式之十
Jul 05 Javascript
input的focus方法使用
Mar 13 Javascript
在myeclipse中如何加入jquery代码提示功能
Jun 03 Javascript
JS中from 表单序列化提交的代码
Jan 20 Javascript
JS对象是否拥有某属性如何判断
Feb 03 Javascript
微信小程序教程系列之视图层的条件渲染(10)
Apr 19 Javascript
微信小程序自定义组件
Aug 16 Javascript
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
小程序开发基础之view视图容器
Aug 21 Javascript
详解webpack 最简打包结果分析
Feb 20 Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
Nov 06 Javascript
详解如何在JS代码中消灭for循环
Dec 11 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中数据库连接方式pdo和mysqli对比分析
2015/02/25 PHP
php自动载入类用法实例分析
2016/06/24 PHP
PHP常见的6个错误提示及解决方法
2016/07/07 PHP
DOM和XMLHttpRequest对象的属性和方法整理
2012/01/04 Javascript
JavaScript的继承的封装介绍
2013/10/15 Javascript
在JS中解析HTML字符串示例代码
2014/04/16 Javascript
采用call方式实现js继承
2014/05/20 Javascript
node.js中的console.info方法使用说明
2014/12/09 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
2015/08/11 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
2016/09/20 Javascript
获取当前月(季度/年)的最后一天(set相关操作及应用)
2016/12/27 Javascript
Angularjs单选改为多选的开发过程及问题解析
2017/02/17 Javascript
Vue.js中数据绑定的语法教程
2017/06/02 Javascript
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
2019/03/08 Javascript
webpack.DefinePlugin与cross-env区别详解
2020/02/23 Javascript
JavaScript设计模式--简单工厂模式定义与应用案例详解
2020/05/23 Javascript
vue-simple-uploader上传成功之后的response获取代码
2020/09/07 Javascript
[03:55]2016国际邀请赛中国区预选赛首日TOP10精彩集锦
2016/06/27 DOTA
Python合并字典键值并去除重复元素的实例
2016/12/18 Python
Python入门_浅谈for循环、while循环
2017/05/16 Python
Django基于ORM操作数据库的方法详解
2018/03/27 Python
Python实现的维尼吉亚密码算法示例
2018/04/12 Python
python中字符串的操作方法大全
2018/06/03 Python
python+numpy按行求一个二维数组的最大值方法
2019/07/09 Python
python科学计算之scipy——optimize用法
2019/11/25 Python
Python3 实现爬取网站下所有URL方式
2020/01/16 Python
Python 从attribute到property详解
2020/03/05 Python
利用Python实现学生信息管理系统的完整实例
2020/12/30 Python
css3实现圆锥渐变conic-gradient效果
2020/02/12 HTML / CSS
Gap中国官网:美式休闲风服饰
2017/02/05 全球购物
英国家用电器折扣网站:Electrical Discount UK
2018/09/17 全球购物
2014年公务员工作总结
2014/11/18 职场文书
2014年工程工作总结
2014/11/25 职场文书
Go语言基础切片的创建及初始化示例详解
2021/11/17 Golang
Unicode中的CJK(中日韩统一表意文字)字符小结
2021/12/06 HTML / CSS
Python使用socket去实现TCP客户端和TCP服务端
2022/04/12 Python