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 追加元素的方法如append、prepend、before
Jan 16 Javascript
php和js对数据库图片进行等比缩放示例
Apr 28 Javascript
解决js下referer兼容各大浏览器的方法
Nov 03 Javascript
js密码强度实时检测代码
Mar 02 Javascript
使用jQuery实现简单的tab框实例
Aug 22 jQuery
Vue v2.5 调整和更新不完全问题
Oct 24 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
Jul 21 Javascript
Angular使用ControlValueAccessor创建自定义表单控件
Mar 08 Javascript
ES6基础之数组和对象的拓展实例详解
Aug 22 Javascript
layer.alert自定义关闭回调事件的方法
Sep 27 Javascript
详解Vue.js 作用域、slot用法(单个slot、具名slot)
Oct 15 Javascript
javascript+css实现进度条效果
Mar 25 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
其他功能
2006/10/09 PHP
第四章 php数学运算
2011/12/30 PHP
PHP 文件系统详解
2012/09/13 PHP
PHP基于phpqrcode类生成二维码的方法详解
2018/03/14 PHP
php的优点总结 php有哪些优点
2019/07/19 PHP
express的中间件bodyParser详解
2014/12/04 Javascript
nodejs创建web服务器之hello world程序
2015/08/20 NodeJs
jQuery仅用3行代码实现的显示与隐藏功能完整实例
2015/10/08 Javascript
jquery原理以及学习技巧介绍
2015/11/11 Javascript
jQuery实现的多滑动门,多选项卡效果代码
2016/03/28 Javascript
值得分享和收藏的Bootstrap学习教程
2016/05/12 Javascript
详解JS-- 浮点数运算处理
2016/11/28 Javascript
angularjs实现猜大小功能
2017/10/23 Javascript
swiper插件自定义切换箭头按钮
2017/12/28 Javascript
深入浅析js原型链和vue构造函数
2018/10/25 Javascript
vue中如何去掉空格的方法实现
2018/11/09 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
2019/05/15 Javascript
vue路由 遍历生成复数router-link的例子
2019/10/30 Javascript
浅谈TypeScript的类型保护机制
2020/02/23 Javascript
vue实现淘宝购物车功能
2020/04/20 Javascript
vue element table中自定义一些input的验证操作
2020/07/18 Javascript
Python对象中__del__方法起作用的条件详解
2018/11/01 Python
Python判断变量名是否合法的方法示例
2019/01/28 Python
Python学习笔记之For循环用法详解
2019/08/14 Python
python实现批量转换图片为黑白
2020/06/16 Python
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
2019/06/03 HTML / CSS
毕业生个人投资创业计划书
2014/01/04 职场文书
初中数学教学反思
2014/01/16 职场文书
四川成都导游欢迎词
2014/01/18 职场文书
人民教师求职自荐信
2014/03/12 职场文书
商场周年庆活动方案
2014/08/19 职场文书
公司行政专员岗位职责
2014/08/24 职场文书
工作简历自我评价
2015/03/11 职场文书
销售经理岗位职责范本
2015/04/02 职场文书
2019最新校园运动会广播稿!
2019/06/28 职场文书
python 用递归实现通用爬虫解析器
2021/04/16 Python