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 变量命名规则详解
May 07 Javascript
多次注册事件会导致一个事件被触发多次的解决方法
Aug 12 Javascript
ie与ff下的event事件使用介绍
Nov 25 Javascript
javascript函数中参数传递问题示例探讨
Jul 31 Javascript
jquery使用ul模拟select实现表单美化的方法
Aug 18 Javascript
js实现拉幕效果的广告代码
Sep 02 Javascript
AngularJS中的Directive实现延迟加载
Jan 25 Javascript
基于vue 开发中出现警告问题去除方法
Jan 25 Javascript
基于vue.js中事件修饰符.self的用法(详解)
Feb 23 Javascript
解决node修改后需频繁手动重启的问题
May 13 Javascript
基于vue-router 多级路由redirect 重定向的问题
Sep 03 Javascript
在vue-cli3中使用axios获取本地json操作
Jul 30 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 MSSQL 存储过程的方法
2008/12/24 PHP
PHP获取文件绝对路径的代码(上一级目录)
2011/05/29 PHP
php接口和抽象类使用示例详解
2014/03/02 PHP
PHP进行批量任务处理不超时的解决方法
2016/07/11 PHP
Yii2.0中的COOKIE和SESSION用法
2016/08/12 PHP
php根据年月获取当月天数及日期数组的方法
2016/11/30 PHP
Linux下快速搭建php开发环境
2017/03/13 PHP
Javascript 强制类型转换函数
2009/05/17 Javascript
优化javascript的执行速度
2010/01/23 Javascript
javascript简易缓动插件(源码打包)
2012/02/16 Javascript
jQuery后代选择器用法实例
2014/12/23 Javascript
jQuery实现ichat在线客服插件
2014/12/29 Javascript
JS实现常见的TAB、弹出层效果(TAB标签,斑马线,遮罩层等)
2015/10/08 Javascript
仅30行代码实现Javascript中的MVC
2016/02/15 Javascript
Js与Jq获取浏览器和对象值的方法
2016/03/18 Javascript
Angular实现的简单查询天气预报功能示例
2017/12/27 Javascript
vue项目动态设置页面title及是否缓存页面的问题
2018/11/08 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
2020/09/24 Javascript
[37:02]OG vs INfamous 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python使用xmlrpc实例讲解
2013/12/17 Python
使用Python编写一个模仿CPU工作的程序
2015/04/16 Python
Python实现的简单hangman游戏实例
2015/06/28 Python
Python操作使用MySQL数据库的实例代码
2017/05/25 Python
python学习基础之循环import及import过程
2018/04/22 Python
Python时间序列处理之ARIMA模型的使用讲解
2019/04/02 Python
python 的numpy库中的mean()函数用法介绍
2020/03/03 Python
基于CSS3实现的漂亮Menu菜单效果代码
2015/09/10 HTML / CSS
新加坡网上化妆品店:Best Buy World
2018/05/18 全球购物
大专计算机个人求职的自我评价
2013/10/21 职场文书
建筑投标担保书
2014/05/20 职场文书
武当山导游词
2015/02/03 职场文书
银行招聘自荐信
2015/03/06 职场文书
优秀员工自荐书
2015/03/06 职场文书
护士旷工检讨书
2015/08/15 职场文书
银行岗位培训心得体会
2016/01/09 职场文书
python文件与路径操作神器 pathlib
2022/04/01 Python