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 相关文章推荐
javascript css float属性的特殊写法
Nov 13 Javascript
详解Node.js模块间共享数据库连接的方法
May 24 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
Jun 22 Javascript
vue中appear的用法
Aug 17 Javascript
JavaScript中关于class的调用方法
Nov 28 Javascript
vuejs选中当前样式active的实例
Aug 22 Javascript
微信小程序实现顶部导航特效
Jan 28 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
Apr 24 Javascript
vue实现图片按比例缩放问题操作
Aug 11 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
Sep 02 Javascript
Swiper实现导航栏滚动效果
Oct 16 Javascript
JS实现简单控制视频播放倍速的实例代码
Apr 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
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
Javascript拓展String方法小结
2013/07/08 Javascript
js实现页面转发功能示例代码
2013/08/05 Javascript
js获取IFRAME当前的URL的方法
2013/11/13 Javascript
javascript实现存储hmtl字符串示例
2014/04/25 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
2014/07/31 Javascript
JS获取屏幕高度的简单实现代码
2016/05/24 Javascript
jquery延迟对象解析
2016/10/26 Javascript
Nodejs 搭建简单的Web服务器详解及实例
2016/11/30 NodeJs
xmlplus组件设计系列之图标(ICON)(1)
2017/05/05 Javascript
vue环境搭建简单教程
2017/11/07 Javascript
解决vue-cli webpack打包后加载资源的路径问题
2018/09/25 Javascript
微信小程序学习总结(五)常见问题实例小结
2020/06/04 Javascript
Postman动态获取返回值过程详解
2020/06/30 Javascript
JavaScript 事件代理需要注意的地方
2020/09/08 Javascript
[45:56]Ti4正赛第一天 VG vs NEWBEE 3
2014/07/19 DOTA
Python实现国外赌场热门游戏Craps(双骰子)
2015/03/31 Python
Python中模块与包有相同名字的处理方法
2017/05/05 Python
python的mysqldb安装步骤详解
2017/08/14 Python
python写入已存在的excel数据实例
2018/05/03 Python
Django进阶之CSRF的解决
2018/08/01 Python
利用python在excel里面直接使用sql函数的方法
2019/02/08 Python
Python中整数的缓存机制讲解
2019/02/16 Python
python 循环数据赋值实例
2019/12/02 Python
Pandas之缺失数据的实现
2021/01/06 Python
AHAVA美国官方网站:死海海泥护肤品牌
2016/10/18 全球购物
澳大利亚波希米亚风时尚品牌:Tree of Life
2019/09/15 全球购物
运动会入场解说词300字
2014/01/25 职场文书
禁烟标语大全
2014/06/11 职场文书
老公保证书
2015/01/17 职场文书
公司给客户的感谢信
2015/01/23 职场文书
作弊检讨书
2015/01/27 职场文书
追悼会悼词大全
2015/06/23 职场文书
校运会宣传稿大全
2015/07/23 职场文书
2016年大学生社会实践心得体会
2015/10/09 职场文书
MySQL 数据类型详情
2021/11/11 MySQL