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中实现块作用域的方法
Apr 01 Javascript
关于全局变量和局部变量的那些事
Jan 11 Javascript
jQuery判断数组是否包含了指定的元素
Mar 10 Javascript
js数组依据下标删除元素
Apr 14 Javascript
移动Web中图片自适应的两种JavaScript解决方法
Jun 18 Javascript
基于JavaScript实现Json数据根据某个字段进行排序
Nov 24 Javascript
七个不允许错过的jQuery小技巧
Dec 21 Javascript
javascript从作用域链谈闭包
Jul 29 Javascript
ionic2 tabs使用 Modal底部tab弹出框
Dec 30 Javascript
js实现适配不同的屏幕大小
Apr 10 Javascript
js实现简易聊天对话框
Aug 17 Javascript
JavaScript对象原型链原理详解
Feb 05 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安装为Apache DSO
2006/10/09 PHP
php用正则表达式匹配URL的简单方法
2013/11/12 PHP
Yii2如何批量添加数据
2016/05/17 PHP
JavaScript ECMA-262-3 深入解析.第三章.this
2011/09/28 Javascript
jQuery中dequeue()方法用法实例
2014/12/29 Javascript
CSS图片响应式 垂直水平居中
2015/08/14 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
2015/10/26 Javascript
javascript结合Flexbox简单实现滑动拼图游戏
2016/02/18 Javascript
Node.js中防止错误导致的进程阻塞的方法
2016/08/11 Javascript
纯css下拉菜单 无需js
2016/08/15 Javascript
AngularJS使用ng-options指令实现下拉框
2016/08/23 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
2016/12/14 Javascript
基于Vuejs和Element的注册插件的编写方法
2017/07/03 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
2017/10/19 jQuery
JavaScript笛卡尔积超简单实现算法示例
2018/07/30 Javascript
详解webpack模块加载器兼打包工具
2018/09/11 Javascript
vue-cli 打包后提交到线上出现 &quot;Uncaught SyntaxError:Unexpected token&quot; 报错
2018/11/06 Javascript
jQuery中实现text()的方法
2019/04/04 jQuery
了解javascript中变量及函数的提升
2019/05/27 Javascript
Vue中rem与postcss-pxtorem的应用详解
2019/11/20 Javascript
Element-UI+Vue模式使用总结
2020/01/02 Javascript
javascript浅层克隆、深度克隆对比及实例解析
2020/02/09 Javascript
python实现从一组颜色中找出与给定颜色最接近颜色的方法
2015/03/19 Python
Python中几种操作字符串的方法的介绍
2015/04/09 Python
利用Python自动监控网站并发送邮件告警的方法
2016/08/24 Python
Python3之字节串bytes与字节数组bytearray的使用详解
2019/08/27 Python
python FTP批量下载/删除/上传实例
2019/12/22 Python
你应该知道的Python3.6、3.7、3.8新特性小结
2020/05/12 Python
PyInstaller的安装和使用的详细步骤
2020/06/02 Python
牵手50新加坡:专为黄金岁月的单身人士而设的交友网站
2020/08/16 全球购物
三年级小学生评语
2014/04/22 职场文书
有限责任公司股东合作协议书
2014/12/02 职场文书
小学生作文评语集锦
2014/12/25 职场文书
奖学金个人总结
2015/03/04 职场文书
nginx搭建NFS网络文件系统
2022/04/14 Servers
Python中Schedule模块使用详解 周期任务神器
2022/04/19 Python