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 相关文章推荐
让FireFox支持innerText的实现代码
Dec 01 Javascript
jquery插件制作 手风琴Panel效果实现
Aug 17 Javascript
mailto的使用技巧分享
Dec 21 Javascript
js兼容的placeholder属性详解
Aug 18 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
Mar 06 Javascript
readonly和disabled属性的区别
Jul 26 Javascript
Spring MVC中Ajax实现二级联动的简单实例
Jul 06 Javascript
VueJS事件处理器v-on的使用方法
Sep 27 Javascript
Angular使用操作事件指令ng-click传多个参数示例
Mar 27 Javascript
js实现秒表计时器
Dec 16 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
Feb 01 Javascript
vue从零实现一个消息通知组件的方法详解
Mar 16 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
自制汽车收音机天线:收听广播的技巧和方法
2021/03/02 无线电
编写自己的php扩展函数
2006/10/09 PHP
PHP 图片上传代码
2011/09/13 PHP
基于curl数据采集之单页面并行采集函数get_htmls的使用
2013/04/28 PHP
一个简洁的PHP可逆加密函数(分享)
2013/06/06 PHP
php使用codebase生成随机数
2014/03/25 PHP
PHP正则表达式替换站点关键字链接后空白的解决方法
2014/09/16 PHP
配置eAccelerator和XCache扩展来加速PHP程序的执行
2015/12/22 PHP
关于php几种字符串连接的效率比较(详解)
2017/02/22 PHP
php 浮点数比较方法详解
2017/05/05 PHP
PHP7修改的函数
2021/03/09 PHP
IE8 下的Js错误HTML Parsing Error...
2009/08/14 Javascript
javascript怎么禁用浏览器后退按钮
2014/03/27 Javascript
浅谈Vue-cli 命令行工具分析
2017/11/22 Javascript
vue中post请求以a=a&amp;b=b 的格式写遇到的问题
2018/04/27 Javascript
详解微信小程序的 request 封装示例
2018/08/21 Javascript
React 组件中的 bind(this)示例代码
2018/09/16 Javascript
在vue中把含有html标签转为html渲染页面的实例
2019/10/28 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
2020/11/03 Javascript
详解基于element的区间选择组件校验(交易金额)
2021/01/07 Javascript
[53:36]Liquid vs VP Supermajor决赛 BO 第三场 6.10
2018/07/05 DOTA
Python解析json之ValueError: Expecting property name enclosed in double quotes: line 1 column 2(char 1)
2017/07/06 Python
Python内置函数——__import__ 的使用方法
2017/11/24 Python
python set内置函数的具体使用
2019/07/02 Python
python pycharm最新版本激活码(永久有效)附python安装教程
2020/09/18 Python
使用Matplotlib绘制不同颜色的带箭头的线实例
2020/04/17 Python
python中rb含义理解
2020/06/18 Python
python中pathlib模块的基本用法与总结
2020/08/17 Python
HTML5 离线应用之打造零请求、无流量网站的解决方法
2013/04/25 HTML / CSS
Myprotein葡萄牙官方网站:英国优质运动营养品牌
2016/09/12 全球购物
联想马亚西亚官方网站:Lenovo Malaysia
2018/09/19 全球购物
Crocs波兰官方商店:女鞋、男鞋、童鞋、洞洞鞋
2019/10/08 全球购物
群众路线教师自我剖析材料
2014/09/29 职场文书
销售经理工作失职检讨书
2014/10/24 职场文书
社会治安综合治理责任书
2015/01/29 职场文书
消防宣传标语大全
2015/08/03 职场文书