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动态创建div属性和样式示例代码
Oct 09 Javascript
JavaScript关闭当前页面(窗口)不带任何提示
Mar 26 Javascript
js实现遮罩层划出效果是生成div而不是显示
Jul 29 Javascript
jquery中使用循环下拉菜单示例代码
Sep 24 Javascript
JavaScript对象之深度克隆介绍
Dec 08 Javascript
JavaScript实现的多个图片广告交替显示效果代码
Sep 04 Javascript
理解jquery事件冒泡
Jan 03 Javascript
JavaScript模版引擎的基本实现方法浅析
Feb 15 Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
May 05 Javascript
node省市区三级数据性能测评实例分析
Nov 06 Javascript
JavaScript常用进制转换及位运算实例解析
Oct 14 Javascript
vue下拉刷新组件的开发及slot的使用详解
Dec 23 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
PHP5与MySQL数据库操作常用代码 收集
2010/03/21 PHP
在PHP中使用反射技术的架构插件使用说明
2010/05/18 PHP
linux环境apache多端口配置虚拟主机的方法深入介绍
2013/06/09 PHP
php通过array_push()函数添加多个变量到数组末尾的方法
2015/03/18 PHP
PHP实现的多文件上传类及用法示例
2016/05/06 PHP
JavaScript 原型链学习总结
2010/10/29 Javascript
用jquery实现点击栏目背景色改变
2012/12/10 Javascript
在javascript中对于DOM的加强
2013/04/11 Javascript
jquery ajax post提交数据乱码
2013/11/05 Javascript
setTimeout()与setInterval()方法区别介绍
2013/12/24 Javascript
jquery ajax 局部刷新小案例
2014/02/08 Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
2014/12/10 Javascript
完美实现仿QQ空间评论回复特效
2015/05/06 Javascript
JavaScript中的操作符类型转换示例总结
2016/05/30 Javascript
js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数
2016/10/25 Javascript
vue中如何使用ztree
2018/02/06 Javascript
React Native使用fetch实现图片上传的示例代码
2018/03/07 Javascript
原生js实现移动端Touch轮播图的方法步骤
2019/01/03 Javascript
js实现纯前端压缩图片
2020/11/16 Javascript
python解析json实例方法
2013/11/19 Python
在Python中处理列表之reverse()方法的使用教程
2015/05/21 Python
Python生成密码库功能示例
2017/05/23 Python
基于Python闭包及其作用域详解
2017/08/28 Python
实例详解python函数的对象、函数嵌套、名称空间和作用域
2019/05/31 Python
python正则表达式匹配不包含某几个字符的字符串方法
2019/07/23 Python
python实现BP神经网络回归预测模型
2019/08/09 Python
Tensorflow: 从checkpoint文件中读取tensor方式
2020/02/10 Python
Python基于smtplib协议实现发送邮件
2020/06/03 Python
不同浏览器对CSS3和HTML5的支持状况
2009/10/31 HTML / CSS
CSS3动画animation实现云彩向左滚动
2014/05/09 HTML / CSS
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
2013/04/25 HTML / CSS
JD Sports芬兰:英国领先的运动鞋和运动服饰零售商
2018/11/16 全球购物
巴西最大的珠宝连锁店:Vivara
2019/04/18 全球购物
档案检查欢迎词
2014/01/13 职场文书
2015年七夕情人节感言
2015/08/03 职场文书
前端vue+express实现文件的上传下载示例
2022/02/18 Vue.js