jQuery取得设置清空select选择的文本与值


Posted in Javascript onJuly 08, 2014

获取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 相关文章推荐
一个XML格式数据转换为图表的例子
Feb 09 Javascript
解决JQeury显示内容没有边距内容紧挨着浏览器边线
Dec 20 Javascript
thinkphp中常用的系统常量和系统变量
Mar 05 Javascript
js实现九宫格图片半透明渐显特效的方法
Feb 16 Javascript
编写高性能Javascript代码的N条建议
Oct 12 Javascript
微信小程序tabbar不显示解决办法
Jun 08 Javascript
angular的输入和输出的使用方法
Sep 22 Javascript
在Vue项目中,防止页面被缩放和放大示例
Oct 28 Javascript
ZK中使用JS读取客户端txt文件内容问题
Nov 07 Javascript
vue-cli打包后本地运行dist文件中的index.html操作
Aug 12 Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
Nov 12 Javascript
JavaScript实现贪吃蛇游戏
Jun 16 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
Jul 08 #Javascript
Javascript遍历table中的元素示例代码
Jul 08 #Javascript
JavaScript遍历table表格中的某行某列并打印其值
Jul 08 #Javascript
一个简单的全屏图片上下打开显示网页效果示例
Jul 08 #Javascript
JavaScript通过元素的ID和name设置样式
Jul 08 #Javascript
jquery中each方法示例和常用选择器
Jul 08 #Javascript
使用jQuery的attr方法来修改onclick值
Jul 07 #Javascript
You might like
php查询ip所在地的方法
2014/12/05 PHP
自己的js工具_Form 封装
2009/08/21 Javascript
js 页面传参数时 参数值含特殊字符的问题
2009/12/13 Javascript
基于jquery1.4.2的仿flash超炫焦点图播放效果
2010/04/20 Javascript
Javascript基础教程之for循环
2015/01/18 Javascript
js图片轮播效果实现代码
2020/04/18 Javascript
javascript实现的全国省市县无刷新多级关联菜单效果代码
2016/08/01 Javascript
Vue.js路由组件vue-router使用方法详解
2016/12/02 Javascript
jQuery Validate 数组 全部验证问题
2017/01/12 Javascript
浅谈对Angular中的生命周期钩子的理解
2017/07/31 Javascript
IScroll5实现下拉刷新上拉加载的功能实例
2017/08/11 Javascript
微信小程序数字滚动插件使用详解
2018/02/02 Javascript
vue 弹框产生的滚动穿透问题的解决
2018/09/21 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
2019/05/02 Javascript
微信小程序转化为uni-app项目的方法示例
2020/05/22 Javascript
[01:03:54]Liquid vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
新手如何快速入门Python(菜鸟必看篇)
2017/06/10 Python
python如何重载模块实例解析
2018/01/25 Python
关于Tensorflow中的tf.train.batch函数的使用
2018/04/24 Python
Numpy数据类型转换astype,dtype的方法
2018/06/09 Python
在python中使用xlrd获取合并单元格的方法
2018/12/26 Python
python中break、continue 、exit() 、pass终止循环的区别详解
2019/07/08 Python
python实现在函数中修改变量值的方法
2019/07/16 Python
在Python函数中输入任意数量参数的实例
2019/07/16 Python
Numpy 多维数据数组的实现
2020/06/18 Python
python 监控logcat关键字功能
2020/09/04 Python
阿迪达斯墨西哥官方网站:adidas墨西哥
2017/11/03 全球购物
外包公司软件测试工程师
2014/11/01 面试题
门卫人员岗位职责
2013/12/24 职场文书
写求职信有什么意义
2014/02/17 职场文书
百日安全活动总结
2014/05/04 职场文书
户籍证明格式
2014/09/15 职场文书
入党介绍人考察意见
2015/06/01 职场文书
高中16字霸气押韵班级口号集锦!
2019/06/27 职场文书
如何用JS实现简单的数据监听
2021/05/06 Javascript
Kubernetes关键组件与结构组成介绍
2022/03/31 Servers