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 相关文章推荐
jQuery学习4 浏览器的事件模型
Feb 07 Javascript
JavaScript获取/更改文本框的值的实例代码
Aug 02 Javascript
js实现九宫格图片半透明渐显特效的方法
Feb 16 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
Dec 13 Javascript
原生javascript实现图片放大镜效果
Jan 18 Javascript
Vue-Router进阶之滚动行为详解
Sep 13 Javascript
jquery 一键复制到剪切板的实例
Sep 20 jQuery
微信小程序出现wx.navigateTo页面不跳转问题的解决方法
Dec 26 Javascript
分析javascript原型及原型链
Mar 18 Javascript
Koa2微信公众号开发之本地开发调试环境搭建
May 16 Javascript
JS实现的类似微信聊天效果示例
Jan 29 Javascript
JavaScript实现页面中录音功能的方法
Jun 04 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 表单提交给自己
2008/07/24 PHP
phpmyadmin 常用选项设置详解版
2010/03/07 PHP
解析array splice的移除数组中指定键的值,返回一个新的数组
2013/07/02 PHP
php实现refresh刷新页面批量导入数据的方法
2014/12/23 PHP
highchart数据源纵轴json内的值必须是int(详解)
2017/02/20 PHP
PHP实现的常规正则验证helper公共类完整实例
2017/04/27 PHP
JavaScript中的闭包原理分析
2010/03/08 Javascript
JS页面延迟执行一些方法(整理)
2013/11/11 Javascript
js日期对象兼容性的处理方法
2014/01/28 Javascript
Javascript的严格模式strict mode详细介绍
2014/06/06 Javascript
基于jQuery实现下拉框
2014/11/24 Javascript
分享一则javascript 调试技巧
2015/01/02 Javascript
jQuery中extend()和fn.extend()方法详解
2015/06/03 Javascript
javascript加减乘除的简单实例
2016/07/12 Javascript
jquery插件ContextMenu设置右键菜单
2017/03/13 Javascript
jQuery判断邮箱格式对错实例代码讲解
2017/04/12 jQuery
JS触摸事件、手势事件详解
2017/05/04 Javascript
layui select动态添加option的实例
2018/03/07 Javascript
在vue项目中,将juery设置为全局变量的方法
2018/09/25 Javascript
函数式编程入门实践(一)
2019/04/20 Javascript
模块化react-router配置方法详解
2019/06/03 Javascript
nuxt配置通过指定IP和端口访问的实现
2020/01/08 Javascript
js实现贪吃蛇游戏 canvas绘制地图
2020/09/09 Javascript
Python pickle模块用法实例
2015/04/14 Python
Python+Opencv识别两张相似图片
2020/03/23 Python
python3 flask实现文件上传功能
2020/03/20 Python
python使用Matplotlib画饼图
2018/09/25 Python
pandas factorize实现将字符串特征转化为数字特征
2019/12/19 Python
开启Django博客的RSS功能的实现方法
2020/02/17 Python
python读取hdfs并返回dataframe教程
2020/06/05 Python
英格兰橄榄球商店:England Rugby Store
2016/12/17 全球购物
华美博弈C/VC工程师笔试试题
2012/07/16 面试题
竞选班长演讲稿
2013/12/30 职场文书
财务部岗位职责
2015/02/03 职场文书
2015年社区流动人口工作总结
2015/05/12 职场文书
JS函数式编程实现XDM一
2022/06/16 Javascript