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 相关文章推荐
document.compatMode介绍
May 21 Javascript
Dojo 学习笔记入门篇 First Dojo Example
Nov 15 Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
Aug 23 Javascript
自动完成的搜索框javascript实现
Feb 26 Javascript
分享12个非常实用的JavaScript小技巧
May 11 Javascript
Winform客户端向web地址传参接收参数的方法
May 17 Javascript
JS JSOP跨域请求实例详解
Jul 04 Javascript
js实现返回顶部效果
Mar 10 Javascript
Webpack实现按需打包Lodash的几种方法详解
May 08 Javascript
微信小程序 scroll-view实现锚点滑动的示例
Dec 06 Javascript
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 jQuery
gojs实现蚂蚁线动画效果
Feb 18 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
eAccelerator的安装与使用详解
2013/06/13 PHP
了解PHP的返回引用和局部静态变量
2015/06/04 PHP
PHP中iconv函数知识汇总
2015/07/02 PHP
PHP动态地创建属性和方法, 对象的复制, 对象的比较,加载指定的文件,自动加载类文件,命名空间
2016/05/06 PHP
Jquery知识点二 jquery下对数组的操作
2011/01/15 Javascript
jQuery移动和复制dom节点实用DOM操作案例
2012/12/17 Javascript
jquery 循环显示div的示例代码
2013/10/18 Javascript
探讨js中的双感叹号判断
2013/11/11 Javascript
JavaScript四种调用模式和this示例介绍
2014/01/02 Javascript
15款jQuery分布引导插件分享
2015/02/04 Javascript
Javascript实现字数统计
2015/07/03 Javascript
jQuery实现的登录浮动框效果代码
2015/09/26 Javascript
javascript自定义滚动条实现代码
2020/04/20 Javascript
不同js异步函数同步的实现方法
2016/05/28 Javascript
vue.js学习笔记之v-bind和v-on解析
2018/05/03 Javascript
从零开始搭建webpack+react开发环境的详细步骤
2018/05/18 Javascript
利用JavaScript的Map提升性能的方法详解
2019/08/14 Javascript
vue中实现高德定位功能
2019/12/03 Javascript
vue将文件/图片批量打包下载zip的教程
2020/10/21 Javascript
[02:59]2014DOTA2西雅图国际邀请赛 圆满落幕中国夺冠
2014/07/23 DOTA
[48:24]完美世界DOTA2联赛循环赛LBZS vs Forest 第一场 10月30日
2020/10/31 DOTA
python读取浮点数和读取文本文件示例
2014/05/06 Python
Python中的MongoDB基本操作:连接、查询实例
2015/02/13 Python
Python的Django框架中的数据库配置指南
2015/07/17 Python
Python Process多进程实现过程
2019/10/22 Python
Mac 使用python3的matplot画图不显示的解决
2019/11/23 Python
TensorFlow keras卷积神经网络 添加L2正则化方式
2020/05/22 Python
如何基于Python爬虫爬取美团酒店信息
2020/11/03 Python
Python实现自动整理文件的脚本
2020/12/17 Python
HTML5微信播放全屏问题的解决方法
2017/03/09 HTML / CSS
德国传统玻璃制造商:Cristalica
2018/04/23 全球购物
VisionPros美国站:加拿大在线隐形眼镜和眼镜零售商
2020/02/11 全球购物
领导视察欢迎词
2014/01/15 职场文书
《雾凇》教学反思
2014/02/17 职场文书
计算机专业应届生求职信
2014/04/06 职场文书
幼儿园教师个人工作总结2015
2015/05/12 职场文书