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 以对象为索引的关联数组
May 19 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
Oct 12 Javascript
jQuery实现鼠标划过修改样式的方法
Apr 14 Javascript
Bootstrap实现响应式导航栏效果
Dec 28 Javascript
基于JQuery及AJAX实现名人名言随机生成器
Feb 10 Javascript
Javascript中的getter和setter初识
Aug 17 Javascript
Angularjs实现页面模板清除的方法
Jul 20 Javascript
原生JavaScript实现remove()和recover()功能示例
Jul 24 Javascript
JavaScript实现打砖块游戏
Feb 25 Javascript
Nuxt页面级缓存的实现
Mar 09 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
Jul 31 Javascript
详解Vue.js3.0 组件是如何渲染为DOM的
Nov 10 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面向对象三大特点学习(充分理解抽象、封装、继承、多态)
2012/05/07 PHP
解析php中eclipse 用空格替换 tab键
2013/06/24 PHP
php实现URL加密解密的方法
2016/11/17 PHP
PHP对象实例化单例方法
2017/01/19 PHP
Laravel框架Auth用户认证操作实例分析
2019/09/29 PHP
iframe里面的元素触发父窗口元素事件的jquery代码
2014/10/19 Javascript
JS简单循环遍历json数组的方法
2016/04/22 Javascript
基于jquery实现表格内容筛选功能实例解析
2016/05/09 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
2016/06/01 Javascript
JavaScript类的写法
2016/09/17 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
2016/11/02 Javascript
js实现适配不同的屏幕大小
2017/04/10 Javascript
Angular.JS内置服务$http对数据库的增删改使用教程
2017/05/07 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
2017/07/18 Javascript
Vue的elementUI实现自定义主题方法
2018/02/23 Javascript
微信小程序WebSocket实现聊天对话功能
2018/07/06 Javascript
详解element-ui中form验证杂记
2019/03/04 Javascript
JavaScript 替换所有匹配内容及正则替换方法
2020/02/12 Javascript
vue动态合并单元格并添加小计合计功能示例
2020/11/26 Vue.js
vue 使用rules对表单字段进行校验的步骤
2020/12/25 Vue.js
python开发环境PyScripter中文乱码问题解决方案
2016/09/11 Python
linux下python使用sendmail发送邮件
2018/05/22 Python
numpy.random模块用法总结
2019/05/27 Python
使用python实现男神女神颜值打分系统(推荐)
2019/10/31 Python
python/Matplotlib绘制复变函数图像教程
2019/11/21 Python
python求一个字符串的所有排列的实现方法
2020/02/04 Python
python入门:argparse浅析 nargs='+'作用
2020/07/12 Python
Python使用xpath实现图片爬取
2020/09/16 Python
Pycharm新手使用教程(图文详解)
2020/09/17 Python
浅析pandas随机排列与随机抽样
2021/01/22 Python
css3动画效果小结(推荐)
2016/07/25 HTML / CSS
大学生暑期社会实践证明范本
2014/10/24 职场文书
计划生育工作汇报
2014/10/28 职场文书
2015年七一建党节活动方案
2015/05/05 职场文书
地道战观后感500字
2015/06/04 职场文书
2019年销售人员的职业生涯规划书
2019/03/25 职场文书