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 相关文章推荐
jQuery1.5.1 animate方法源码阅读
Apr 05 Javascript
javascript截取字符串(通过substring实现并支持中英文混合)
Jun 24 Javascript
jquery 操作css样式、位置、尺寸方法汇总
Nov 28 Javascript
jQuery实现二级下拉菜单效果
Jan 05 Javascript
高性能JavaScript循环语句和条件语句
Jan 20 Javascript
javascript中获取元素标签中间的内容的实现方法
Oct 08 Javascript
jquery与js实现全选功能的区别
Jun 11 jQuery
Angularjs的$http异步删除数据详解及实例
Jul 27 Javascript
浅谈vue-router2路由参数注意的问题
Nov 08 Javascript
vue router使用query和params传参的使用和区别
Nov 13 Javascript
vscode下vue项目中eslint的使用方法
Jan 13 Javascript
layui 数据表格复选框实现单选功能的例子
Sep 19 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中,文件上传
2006/12/06 PHP
PHP数组的交集array_intersect(),array_intersect_assoc(),array_inter_key()函数的小问题
2011/05/29 PHP
php输出echo、print、print_r、printf、sprintf、var_dump的区别比较
2013/06/21 PHP
PHP魔术方法以及关于独立实例与相连实例的全面讲解
2016/10/18 PHP
List the Codec Files on a Computer
2007/06/18 Javascript
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
2014/01/11 Javascript
javascript获取浏览器类型和版本的方法(js获取浏览器版本)
2014/03/13 Javascript
node.js入门教程
2014/06/01 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
2014/06/10 Javascript
js使用正则实现ReplaceAll全部替换的方法
2014/07/18 Javascript
JS实现同时搜索百度和必应的方法
2015/01/27 Javascript
jquery实现移动端点击图片查看大图特效
2020/09/11 Javascript
学习JavaScript设计模式(策略模式)
2015/11/26 Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
2016/04/26 Javascript
详解nodejs 文本操作模块-fs模块(二)
2016/12/22 NodeJs
利用node.js写一个爬取知乎妹纸图的小爬虫
2017/05/03 Javascript
Vue.use()在new Vue() 之前使用的原因浅析
2019/08/26 Javascript
layer.open的自适应及居中及子页面标题的修改方法
2019/09/05 Javascript
基于Django的ModelForm组件(详解)
2017/12/07 Python
Windows下PyCharm安装图文教程
2018/08/27 Python
使用Python获取网段IP个数以及地址清单的方法
2018/11/01 Python
python使用suds调用webservice接口的方法
2019/01/03 Python
详解python运行三种方式
2019/05/13 Python
用python做游戏的细节详解
2019/06/25 Python
mac使用python识别图形验证码功能
2020/01/10 Python
解决flask接口返回的内容中文乱码的问题
2020/04/03 Python
python爬取代理ip的示例
2020/12/18 Python
Python运算符+与+=的方法实例
2021/02/18 Python
基于CSS3的CSS 多栏(Multi-column)实现瀑布流源码分享
2014/06/11 HTML / CSS
玩具反斗城美国官网:Toys"R"Us
2016/09/17 全球购物
英国的屈臣氏:Boots博姿
2017/12/23 全球购物
群众路线教育实践活动心得体会
2014/03/07 职场文书
学习十八届四中全会精神思想汇报
2014/10/23 职场文书
2014年领导班子工作总结
2014/12/11 职场文书
上班迟到检讨书范文
2015/05/06 职场文书
Canvas三种动态画圆实现方法说明(小结)
2021/04/16 Javascript