jQuery取得select选择的文本与值的示例


Posted in Javascript onDecember 09, 2013

获取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循环改变div颜色具体方法
Jun 25 Javascript
全面了解JS中的匿名函数
Jun 29 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
Jul 27 Javascript
js实现按钮控制带有停顿效果的图片滚动
Aug 30 Javascript
整理关于Bootstrap警示框的慕课笔记
Mar 29 Javascript
Angular4实现动态添加删除表单输入框功能
Aug 11 Javascript
使用canvas进行图像编辑的实例
Aug 29 Javascript
利用js编写网页进度条效果
Oct 08 Javascript
小程序实现发表评论功能
Jul 06 Javascript
实例详解BootStrap的动态模态框及静态模态框
Aug 13 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
Oct 19 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
Nov 10 Javascript
JavaScript—window对象使用示例
Dec 09 #Javascript
使用js实现按钮控制文本框加1减1应用于小时+分钟
Dec 09 #Javascript
跨域传值即主页面与iframe之间互相传值
Dec 09 #Javascript
深入理解JavaScript中的传值与传引用
Dec 09 #Javascript
js Array操作的最简短最容易理解方法
Dec 09 #Javascript
javascript放大镜效果的简单实现
Dec 09 #Javascript
javascript贪吃蛇完整版(源码)
Dec 09 #Javascript
You might like
php str_pad 函数使用详解
2009/01/13 PHP
hessian 在PHP中的使用介绍
2010/12/13 PHP
session在PHP大型web应用中的使用
2011/06/25 PHP
五款PHP代码重构工具推荐
2014/10/14 PHP
php实现使用正则将文本中的网址转换成链接标签
2014/12/03 PHP
WordPress中获取所使用的模板的页面ID的简单方法
2015/12/31 PHP
thinkPHP3.1验证码的简单实现方法
2016/04/22 PHP
ExtJS PropertyGrid中使用Combobox选择值问题
2010/06/13 Javascript
理解JSON:3分钟课程
2011/10/28 Javascript
jQuery动态设置form表单的enctype值(实现代码)
2013/07/04 Javascript
js利用prototype调用Array的slice方法示例
2014/06/09 Javascript
JQuery显示隐藏页面元素的方法总结
2015/04/16 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
2016/10/10 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
2016/12/06 Javascript
bootstrap table分页模板和获取表中的ID方法
2017/01/10 Javascript
浅谈jquery拼接字符串效率比较高的方法
2017/02/22 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
2017/09/20 Javascript
WebPack配置vue多页面的技巧
2018/05/15 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
2019/06/17 Javascript
基于JavaScript实现简单抽奖功能代码实例
2020/10/20 Javascript
Python os模块介绍
2014/11/30 Python
Python实现压缩与解压gzip大文件的方法
2016/09/18 Python
Python 给某个文件名添加时间戳的方法
2018/10/16 Python
python 猴子补丁(monkey patch)
2019/06/26 Python
windows下Python安装、使用教程和Notepad++的使用教程
2019/10/06 Python
python已协程方式处理任务实现过程
2019/12/27 Python
10个python爬虫入门实例(小结)
2020/11/01 Python
Python日志打印里logging.getLogger源码分析详解
2021/01/17 Python
CSS3系列之3D制作方法案例
2017/08/14 HTML / CSS
用CSS3实现无限循环的无缝滚动的实例代码
2017/07/04 HTML / CSS
H5新属性audio音频和video视频的控制详解(推荐)
2016/12/09 HTML / CSS
关于HTML5+ API plusready的兼容问题
2020/11/20 HTML / CSS
中餐厅主管的职责范文
2014/02/04 职场文书
体育系毕业生求职自荐信
2014/04/16 职场文书
简历自我评价优缺点
2015/03/11 职场文书
ant design charts 获取后端接口数据展示
2022/05/25 Javascript