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各浏览器中option元素的表现差异
Apr 07 Javascript
javascript中的作用域和上下文使用简要概述
Dec 05 Javascript
Jquery getJSON方法详细分析
Dec 26 Javascript
Javascript 实现图片无缝滚动
Dec 19 Javascript
avalonjs实现仿微博的图片拖动特效
May 06 Javascript
JavaScript数据类型学习笔记
Jan 25 Javascript
WEB 前端开发中防治重复提交的实现方法
Oct 26 Javascript
基于webpack 实用配置方法总结
Sep 28 Javascript
vue 使用vue-i18n做全局中英文切换的方法
Oct 29 Javascript
vue 微信扫码登录(自定义样式)
Jan 06 Javascript
js实现随机抽奖
Mar 19 Javascript
JS中作用域以及变量范围分析
Jul 18 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中让curl支持sock5的代码实例
2015/01/21 PHP
php+redis实现消息队列功能示例
2019/09/19 PHP
基于PHP实现堆排序原理及实例详解
2020/06/19 PHP
js获取单选按钮的数据
2006/11/27 Javascript
javascript TextArea动态显示剩余字符
2008/10/22 Javascript
JavaScript中使用构造器创建对象无需new的情况说明
2012/03/01 Javascript
js调试系列 源码定位与调试[基础篇]
2014/06/18 Javascript
使用node.js 制作网站前台后台
2014/11/13 Javascript
JavaScript定义类和对象的方法
2014/11/26 Javascript
node.js中的fs.write方法使用说明
2014/12/15 Javascript
轻松创建nodejs服务器(5):事件处理程序
2014/12/18 NodeJs
js实现透明度渐变效果的方法
2015/04/10 Javascript
jQuery插件制作之全局函数用法实例
2015/06/01 Javascript
jQuery实现的导航下拉菜单效果
2016/07/04 Javascript
js实现目录链接,内容跟着目录滚动显示的简单实例
2016/10/15 Javascript
微信小程序 自己制作小组件实例详解
2016/12/22 Javascript
vue.js+Element实现表格里的增删改查
2017/01/18 Javascript
为Jquery EasyUI 组件加上清除功能的方法(详解)
2017/04/13 jQuery
基于jQuery中ajax的相关方法汇总(必看篇)
2017/11/08 jQuery
利用原生的JavaScript实现简单拼图游戏
2018/11/18 Javascript
javascript自定义日期比较函数用法示例
2019/07/22 Javascript
jQuery zTree插件使用简单教程
2019/08/16 jQuery
vue flex 布局实现div均分自动换行的示例代码
2020/08/05 Javascript
详细介绍Python函数中的默认参数
2015/03/30 Python
利用PyInstaller将python程序.py转为.exe的方法详解
2017/05/03 Python
Python使用matplotlib绘制正弦和余弦曲线的方法示例
2018/01/06 Python
python多进程实现文件下载传输功能
2018/07/28 Python
python将一个英文语句以单词为单位逆序排放的方法
2018/12/20 Python
Python中pass语句的作用是什么
2016/06/01 面试题
写给学生的新学期寄语
2014/01/18 职场文书
奉献演讲稿范文
2014/05/21 职场文书
向女朋友道歉的话
2015/01/20 职场文书
教代会开幕词
2015/01/28 职场文书
难以忽视的真相观后感
2015/06/05 职场文书
德劲DE1108畅想
2021/04/22 无线电
Win11 KB5015814遇安装失败 影响开始菜单性能解决方法
2022/07/15 数码科技