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 相关文章推荐
图像替换新技术 状态域方法
Jan 28 Javascript
Js四则运算函数代码
Jul 21 Javascript
JS匀速运动演示示例代码
Nov 26 Javascript
javascript实现10个球随机运动、碰撞实例详解
Jul 08 Javascript
jQuery+Ajax实现无刷新操作
Jan 04 Javascript
JS中检测数据类型的几种方式及优缺点小结
Dec 12 Javascript
Javascript中构造函数要注意的一些坑
Jan 23 Javascript
javascript填充默认头像方法
Feb 22 Javascript
jquery radio 动态控制选中失效问题的解决方法
Feb 28 jQuery
JS拖拽排序插件Sortable.js用法实例分析
Feb 20 Javascript
详解Js里的for…in和for…of的用法
Mar 28 Javascript
vue项目中全局引入1个.scss文件的问题解决
Aug 01 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编码规范-php coding standard
2007/03/16 PHP
解析在zend Farmework下如何创立一个FORM表单
2013/06/28 PHP
php使用Cookie控制访问授权的方法
2015/01/21 PHP
映彩衣的js随笔(js图片切换效果)
2011/07/31 Javascript
javascript计算星座属相(十二生肖属相)示例代码
2014/01/09 Javascript
jquery 判断滚动条到达了底部和顶端的方法
2014/04/02 Javascript
node.js中的favicon.ico请求问题处理
2014/12/15 Javascript
基于JavaScript实现Json数据根据某个字段进行排序
2015/11/24 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
2016/05/31 Javascript
微信小程序 MD5加密登录密码详解及实例代码
2017/01/12 Javascript
ES6 Promise对象概念与用法分析
2017/04/01 Javascript
React.js中常用的ES6写法总结(推荐)
2017/05/09 Javascript
Node.js中 __dirname 的使用介绍
2017/06/19 Javascript
浅谈NodeJs之数据库异常处理
2017/10/25 NodeJs
Angular实现的敏感文字自动过滤与提示功能示例
2017/12/29 Javascript
微信小程序实现图片压缩
2019/12/03 Javascript
JavaScript实现Tab选项卡切换
2020/02/13 Javascript
使用BeautifulSoup爬虫程序获取百度搜索结果的标题和url示例
2014/01/19 Python
举例讲解Python中is和id的用法
2015/04/03 Python
Python中的random()方法的使用介绍
2015/05/15 Python
浅析python中SQLAlchemy排序的一个坑
2017/02/24 Python
Python3 模块、包调用&amp;路径详解
2017/10/25 Python
简单了解python元组tuple相关原理
2019/12/02 Python
详解python datetime模块
2020/08/17 Python
python利用xlsxwriter模块 操作 Excel
2020/10/14 Python
Python爬取某平台短视频的方法
2021/02/08 Python
HSRP的含义以及如何工作
2014/09/10 面试题
个人自我评价范文
2014/02/05 职场文书
《三亚落日》教学反思
2014/04/26 职场文书
大学生就业协议书范本(适用于公司企业)
2014/10/07 职场文书
单位单身证明样本
2014/10/11 职场文书
奖学金感谢信
2015/01/21 职场文书
2015年党员个人自我评价
2015/03/03 职场文书
2015年加油站工作总结
2015/05/13 职场文书
《彼得与狼》教学反思
2016/02/20 职场文书
Spring Boot DevTools 全局配置学习指南
2022/03/31 Java/Android