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 解决表单仍然提交即使监听处理函数返回false
Mar 14 Javascript
jquery学习笔记二 实现可编辑的表格
Apr 09 Javascript
jquery下将选择的checkbox的id组成字符串的方法
Nov 28 Javascript
js 中{},[]中括号,大括号使用详解
May 12 Javascript
js限制文本框只能输入整数或者带小数点的数字
Apr 27 Javascript
程序员必知35个jQuery 代码片段
Nov 05 Javascript
浅谈Javascript中的12种DOM节点类型
Aug 19 Javascript
webpack将js打包后的map文件详解
Feb 22 Javascript
小程序实现列表点赞功能
Nov 02 Javascript
Vue路由之JWT身份认证的实现方法
Aug 26 Javascript
JS数组进阶示例【数组的几种函数用法】
Jan 16 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 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
全国FM电台频率大全 - 7 吉林省
2020/03/11 无线电
收集的PHP中与数组相关的函数
2007/03/22 PHP
PHP的加密方式及原理
2012/06/14 PHP
详解WordPress开发中的get_post与get_posts函数使用
2016/01/04 PHP
PHP getallheaders无法获取自定义头(headers)的问题
2016/03/23 PHP
抛弃 PHP 代价太高
2016/04/26 PHP
PHP验证码无法显示的原因及解决办法
2017/08/11 PHP
msn上的tab功能Firefox对childNodes处理的一个BUG
2008/01/21 Javascript
再说AutoComplete自动补全之实现原理
2011/11/05 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
2014/02/10 Javascript
js鼠标点击图片实现随机变换图片的方法
2015/02/16 Javascript
Vue与Node.js通过socket.io通信的示例代码
2018/07/25 Javascript
vue3修改link标签默认icon无效问题详解
2019/10/09 Javascript
JavaScript字符和ASCII实现互相转换
2020/06/03 Javascript
vant 时间选择器--开始时间和结束时间实例
2020/11/04 Javascript
python matlibplot绘制3D图形
2018/07/02 Python
Pandas DataFrame数据的更改、插入新增的列和行的方法
2019/06/25 Python
Python中字符串List按照长度排序
2019/07/01 Python
浅谈Keras中shuffle和validation_split的顺序
2020/06/19 Python
Python中的With语句的使用及原理
2020/07/29 Python
浅谈css3中的前缀
2016/07/20 HTML / CSS
aden + anais官方网站:婴儿襁褓、毯子、尿布和服装
2017/06/21 全球购物
LTD Commodities:礼品,独特发现,家居装饰,家用器皿
2017/08/11 全球购物
标准导师推荐信(医学类)
2013/10/28 职场文书
建筑工程技术应届生求职信
2013/11/17 职场文书
工业自动化专业毕业生推荐信
2013/11/18 职场文书
财务会计专业求职信范文
2013/12/31 职场文书
拾金不昧锦旗标语
2014/06/27 职场文书
庆祝国庆节演讲稿2014
2014/09/19 职场文书
群众路线查摆问题及整改措施
2014/10/10 职场文书
傲慢与偏见电影观后感
2015/06/10 职场文书
停发工资证明范本
2015/06/12 职场文书
《青山不老》教学反思
2016/02/22 职场文书
Golang 正则匹配效率详解
2021/04/25 Golang
pyqt5打包成exe可执行文件的方法
2021/05/14 Python
Python中time标准库的使用教程
2022/04/13 Python