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 相关文章推荐
firefox浏览器下javascript 拖动层效果与原理分析代码
Dec 04 Javascript
JS代码优化技巧之通俗版(减少js体积)
Dec 23 Javascript
jQuery响应enter键的实现思路
Apr 18 Javascript
JS循环遍历JSON数据的方法
Jul 08 Javascript
jQuery实现倒计时按钮功能代码分享
Sep 03 Javascript
javascript中定义类的方法详解
Feb 10 Javascript
JavaScript获取浏览器信息的方法
Nov 20 Javascript
Bootstrap缩略图的创建方法
Mar 22 Javascript
express + jwt + postMan验证实现持久化登录
Jun 05 Javascript
如何解决js函数防抖、节流出现的问题
Jun 17 Javascript
关于JS解构的5种有趣用法
Sep 05 Javascript
vue-amap根据地址回显地图并mark的操作
Nov 03 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
ThinkPHP中实例Model方法的区别说明
2010/08/21 PHP
php分页原理 分页代码 分页类制作教程
2016/09/23 PHP
javascript 框架小结 个人工作经验
2009/06/13 Javascript
JavaScript 读取元素的CSS信息的代码
2010/02/07 Javascript
减少访问DOM的次数提升javascript性能
2014/02/24 Javascript
不用一句js代码初始化组件
2016/01/27 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
2016/08/10 Javascript
利用js+css+html实现固定table的列头不动
2016/12/08 Javascript
jQuery使用Layer弹出层插件闪退问题
2016/12/22 Javascript
jQuery实现的checkbox级联选择下拉菜单效果示例
2016/12/26 Javascript
nodejs操作mysql实现增删改查的实例
2017/05/28 NodeJs
package.json文件配置详解
2017/06/15 Javascript
jquery实现一个全局计时器(商城可用)
2017/06/30 jQuery
jquery tmpl模板(实例讲解)
2017/09/02 jQuery
浅谈JavaScript find 方法不支持IE的问题
2017/09/28 Javascript
Vue 组件传值几种常用方法【总结】
2018/05/28 Javascript
详解JavaScript中的函数、对象
2019/04/01 Javascript
详解如何运行vue项目
2019/04/15 Javascript
Vue 中可以定义组件模版的几种方式
2019/08/06 Javascript
关于Vue中axios的封装实例详解
2019/10/20 Javascript
VUE 单页面使用 echart 窗口变化时的用法
2020/07/30 Javascript
[04:22]DOTA2大事件之护国神翼
2020/08/14 DOTA
[55:26]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第一场 2月23日
2021/03/11 DOTA
Django实现简单分页功能的方法详解
2017/12/05 Python
python字符串的index和find的区别详解
2020/06/20 Python
Python代码执行时间测量模块timeit用法解析
2020/07/01 Python
Linux文件操作命令都有哪些
2015/02/27 面试题
css animation配合SVG制作能量流动效果
2021/03/24 HTML / CSS
销售主管的自我评价分享
2014/01/03 职场文书
党员承诺践诺书
2014/05/20 职场文书
2015年节能减排工作总结
2015/05/14 职场文书
学雷锋感言
2015/08/03 职场文书
python中os.path.join()函数实例用法
2021/05/26 Python
anaconda python3.8安装后降级
2021/06/11 Python
浅析CSS在DevTools 中架构演变
2021/10/05 HTML / CSS
python数据处理之Pandas类型转换
2022/04/28 Python