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使用手册之三 CSS操作
Mar 24 Javascript
JavaScript更改class和id的方法
Oct 10 Javascript
jquery tools 系列 scrollable(2)
Sep 06 Javascript
Javascript 获取滚动条位置等信息的函数
Sep 08 Javascript
jQuery中:lt选择器用法实例
Dec 29 Javascript
js oncontextmenu事件使用详解
Mar 25 Javascript
详解VUE 对element-ui中的ElTableColumn扩展
Mar 28 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
Aug 27 Javascript
微信小游戏之使用three.js 绘制一个旋转的三角形
Jun 10 Javascript
jQuery实现轮播图效果demo
Jan 11 jQuery
Node.js API详解之 zlib模块用法分析
May 19 Javascript
深入了解Vue3模板编译原理
Nov 19 Vue.js
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简单命令代码集锦
2007/09/24 PHP
ZF等常用php框架中存在的问题
2008/01/10 PHP
php动态生成函数示例
2014/03/21 PHP
PHP的引用详解
2015/02/22 PHP
PHP中preg_match函数正则匹配的字符串长度问题
2015/05/27 PHP
PHP编译configure时常见错误的总结
2017/08/17 PHP
js 数组实现一个类似ruby的迭代器
2009/10/27 Javascript
JSON语法五大要素图文介绍
2012/12/04 Javascript
javascript实现动态模态绑定grid过程代码
2014/09/22 Javascript
NodeJS学习笔记之Connect中间件模块(二)
2015/01/27 NodeJs
JavaScript给url网址进行encode编码的方法
2015/03/18 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
2016/06/17 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
2016/07/04 Javascript
jQuery树形控件zTree使用小结
2016/08/02 Javascript
Angular2 (RC4) 路由与导航详解
2016/09/21 Javascript
JavaScript制作简单的框选图表
2017/05/15 Javascript
Angular 1.x个人使用的经验小结
2017/07/19 Javascript
vue toggle做一个点击切换class(实例讲解)
2018/03/13 Javascript
浅探express路由和中间件的实现
2019/09/30 Javascript
微信小程序wxml列表渲染原理解析
2019/11/27 Javascript
three.js如何实现3D动态文字效果
2021/03/03 Javascript
Python通过DOM和SAX方式解析XML的应用实例分享
2015/11/16 Python
详解Python迭代和迭代器
2016/03/28 Python
Python基于pyCUDA实现GPU加速并行计算功能入门教程
2018/06/19 Python
获取python的list中含有重复值的index方法
2018/06/27 Python
python列表推导式入门学习解析
2019/12/02 Python
Python实现Wordcloud生成词云图的示例
2020/03/30 Python
Python selenium自动化测试模型图解
2020/04/15 Python
倩碧美国官网:Clinique美国
2016/07/20 全球购物
韩国邮政旗下生鲜食品网上超市:epost
2016/08/27 全球购物
澳大利亚领先的宠物用品商店:VetSupply
2017/09/08 全球购物
澳洲健康食品网上商店:Aussie Health Products
2018/06/15 全球购物
Perfume’s Club澳大利亚官网:西班牙领先的在线美容店
2021/02/01 全球购物
Java中有几种方法可以实现一个线程?用什么关键字修饰同步方法?stop()和suspend()方法为何不推荐使用?
2015/08/04 面试题
小学毕业典礼演讲稿
2014/09/09 职场文书
2015年干部教育培训工作总结
2015/05/15 职场文书