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 相关文章推荐
extjs form textfield的隐藏方法
Dec 29 Javascript
页面中js执行顺序
Nov 09 Javascript
jquery中动态效果小结
Dec 16 Javascript
jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
Oct 24 Javascript
JS实现屏蔽shift,Ctrl,alt等功能键的方法
Jun 01 Javascript
Avalonjs 实现简单购物车功能(实例代码)
Feb 07 Javascript
JSONP跨域请求
Mar 02 Javascript
JS实现动态添加DOM节点和事件的方法示例
Apr 28 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
Sep 26 Javascript
JavaScript内置对象math,global功能与用法实例分析
Jun 10 Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
Sep 03 Javascript
Vue页面切换和a链接的本质区别详解
Nov 12 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生成的html meta和link标记在body标签里 顶部有个空行
2010/05/18 PHP
简单的php缓存类分享     php缓存机制
2014/01/22 PHP
利用PHP自动生成印有用户信息的名片
2016/08/01 PHP
php并发加锁示例
2016/10/17 PHP
Ajax一统天下之Dojo整合篇
2007/03/24 Javascript
firefox浏览器下javascript 拖动层效果与原理分析代码
2007/12/04 Javascript
基于jquery的获取浏览器窗口大小的代码
2011/03/28 Javascript
深入理解javascript学习笔记(一) 编写高质量代码
2012/08/09 Javascript
js控制iframe的高度/宽度让其自适应内容
2014/04/09 Javascript
jquery实现人性化的有选择性禁用鼠标右键
2014/06/30 Javascript
jQuery设置指定网页元素宽度和高度的方法
2015/03/25 Javascript
完善的jquery处理机制
2016/02/21 Javascript
15位和18位身份证JS校验的简单实例
2016/07/18 Javascript
javascript 数组的正态分布排序的问题
2016/07/31 Javascript
JavaScript学习笔记之函数记忆
2017/09/06 Javascript
JS实现可视化文件上传
2018/09/08 Javascript
vue-cli3中配置alias和打包加hash值操作
2020/09/04 Javascript
[52:12]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
Python装饰器入门学习教程(九步学习)
2016/01/28 Python
高效测试用例组织算法pairwise之Python实现方法
2017/07/19 Python
对numpy和pandas中数组的合并和拆分详解
2018/04/11 Python
Python数据报表之Excel操作模块用法分析
2019/03/11 Python
Python 实现顺序高斯消元法示例
2019/12/09 Python
Python中url标签使用知识点总结
2020/01/16 Python
AmazeUI 模态窗口的实现代码
2020/08/18 HTML / CSS
台湾旅游网站:雄狮旅游网
2017/08/16 全球购物
意大利珠宝店:Luxury Zone
2019/01/05 全球购物
The North Face北面荷兰官网:美国著名户外品牌
2019/10/16 全球购物
JVM是一个编译程序还是解释程序
2012/09/11 面试题
家长对学生的评语
2014/04/18 职场文书
村道德模范事迹材料
2014/08/28 职场文书
2014年终个人工作总结
2014/11/07 职场文书
2015年校长新年寄语
2014/12/08 职场文书
2014年领导班子工作总结
2014/12/11 职场文书
2015年城市管理工作总结
2015/05/23 职场文书
《莫泊桑拜师》教学反思
2016/02/22 职场文书