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 相关文章推荐
优秀js开源框架-jQuery使用手册(1)
Mar 10 Javascript
javascript 网页跳转的方法
Dec 24 Javascript
基于jquery.Jcrop的头像编辑器
Mar 01 Javascript
js简单实现HTML标签Select联动带跳转
Oct 23 Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
Dec 25 Javascript
iframe调用父页面函数示例详解
Jul 17 Javascript
JavaScript实现的简单幂函数实例
Apr 17 Javascript
javascript实现检验的各种规则
Jul 31 Javascript
Vuejs实现带样式的单文件组件新方法
May 02 Javascript
在layui中select更改后生效的方法
Sep 05 Javascript
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
Aug 12 Javascript
VUE之图片Base64编码使用ElementUI组件上传
Apr 09 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目录函数实现创建、读取目录教程实例
2011/01/13 PHP
Linux编译升级php的详细方法
2013/11/04 PHP
PHP实现Unicode编码相互转换的方法示例
2020/11/17 PHP
PHP+Ajax简单get验证操作示例
2019/03/02 PHP
JavaScript入门教程(7) History历史对象
2009/01/31 Javascript
Javascript 函数对象的多重身份
2009/06/28 Javascript
window.location.hash 使用说明
2010/11/08 Javascript
jquery教程ajax请求json数据示例
2014/01/13 Javascript
获取中文字符串的实际长度代码
2014/06/05 Javascript
JavaScript中用字面量创建对象介绍
2014/12/31 Javascript
vue2.0+webpack环境的构造过程
2016/11/08 Javascript
jquery.Callbacks的实现详解
2016/11/30 Javascript
vue中实现图片和文件上传的示例代码
2018/03/16 Javascript
Vue下滚动到页面底部无限加载数据的示例代码
2018/04/22 Javascript
ES6知识点整理之对象解构赋值应用示例
2019/04/17 Javascript
element-ui table组件如何使用render属性的实现
2019/11/04 Javascript
python打开网页和暂停实例
2014/09/30 Python
在Python中使用SQLite的简单教程
2015/04/29 Python
基于循环神经网络(RNN)实现影评情感分类
2018/03/26 Python
Django中日期处理注意事项与自定义时间格式转换详解
2018/08/06 Python
python 获得任意路径下的文件及其根目录的方法
2019/02/16 Python
python文件操作seek()偏移量,读取指正到指定位置操作
2020/07/05 Python
365 Tickets英国:全球景点门票
2019/07/06 全球购物
英国领先的独立酒精饮料零售商:DrinkSupermarket
2021/01/13 全球购物
政法大学毕业生自荐信范文
2014/01/01 职场文书
网络维护中文求职信
2014/01/03 职场文书
一份报关员的职业规划范文
2014/01/08 职场文书
俄罗斯商务邀请函
2014/01/26 职场文书
英语老师推荐信
2014/02/26 职场文书
委托书怎么写
2014/07/31 职场文书
小学教师个人总结
2015/02/05 职场文书
趣味运动会加油词
2015/07/18 职场文书
2015年秋季校长开学典礼致辞
2015/07/29 职场文书
致男子1500米运动员的广播稿
2019/11/08 职场文书
redis cluster支持pipeline的实现思路
2021/06/23 Redis
python+pyhyper实现识别图片中的车牌号思路详解
2022/12/24 Python