jQuery操作select的实例代码


Posted in Javascript onJune 14, 2012

select:

夺得2008年欧洲杯冠军的国家是: 
<select name="nation" id="nation"> 
<option value="">请选择</option> 
<option value="Germany">德国</option> 
<option value="France">法国</option> 
<option value="Italy">意大利</option> 
<option value="England">英国</option> 
<option value="Spain">西班牙</option> 
<option value="Greece">希腊</option> 
</select>

1、判断是否选择了国家。
if($("#nation").val()=="") { 
alert("请选择国家"); 
}

2、获取select中option项的个数。

$("#nation").find("option").length;

3、获取选中的option的值value和显示的文本text。

//获取选中项的值 
$("#nation").val(); 
//获取选中项显示的文本 
$("#nation").find("option:selected").text();

4、设置西班牙为选中项。

$("#nation").find("option[value='Spain']").attr("selected",true);

5、获取被选中的国家的索引,索引从0开始。

$("#nation").find("option:selected").index()

6、添加一个国家选项。
?

$("#nation").append("<option value='Ukraine'>乌克兰</option>");

7、删除一个国家选项。

//删除value="Italy"的选项 
$("#nation").find("option[value='Italy']").remove(); 
//删除索引为2的选项 
$("#nation").find("option[index=2]").remove();
Javascript 相关文章推荐
JS如何判断移动端访问设备并解析对应CSS
Nov 27 Javascript
使用jquery组件qrcode生成二维码及应用指南
Feb 22 Javascript
js定义类的几种方法(推荐)
Jun 08 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
Aug 27 Javascript
利用JS实现简单的瀑布流加载图片效果
Apr 22 Javascript
pm2 部署 node的三种方法示例
Oct 20 Javascript
angularjs实现时间轴效果的示例代码
Nov 29 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
Dec 06 Javascript
彻底弄懂 JavaScript 执行机制
Oct 23 Javascript
Vue element-ui父组件控制子组件的表单校验操作
Jul 17 Javascript
JavaScript 空间坐标的使用
Aug 19 Javascript
JS+CSS实现过渡特效
Jan 02 Javascript
jQuery动态添加 input type=file的实现代码
Jun 14 #Javascript
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
Jun 14 #Javascript
基于jQuery的烟花效果(运动相关)点击屏幕出烟花
Jun 14 #Javascript
基于jQuery的360图片展示实现代码
Jun 14 #Javascript
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
Jun 14 #Javascript
jquery 之 $().hover(func1, funct2)使用方法
Jun 14 #Javascript
Javascript生成json的函数代码(可以用php的json_decode解码)
Jun 11 #Javascript
You might like
将博客园(cnblogs.com)数据导入到wordpress的代码
2013/01/06 PHP
Js 弹出框口并返回值的两种常用方法
2010/12/30 Javascript
在javaScript中关于submit和button的区别介绍
2013/10/20 Javascript
js阻止事件追加的具体实现
2014/10/15 Javascript
使用javascript实现雪花飘落的效果
2015/01/13 Javascript
swtich/if...else的替代语句
2015/08/16 Javascript
jQuery AJAX timeout 超时问题详解
2016/06/21 Javascript
简洁实用的BootStrap jQuery手风琴插件
2016/08/31 Javascript
详解node nvm进行node多版本管理
2017/10/21 Javascript
关于vue中watch检测到不到对象属性的变化的解决方法
2018/02/08 Javascript
Vue中的无限加载vue-infinite-loading的方法
2018/04/08 Javascript
深入理解Vue router的部分高级用法
2018/08/15 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
2019/07/26 jQuery
js实现双人五子棋小游戏
2020/05/28 Javascript
python用reduce和map把字符串转为数字的方法
2016/12/19 Python
python画出三角形外接圆和内切圆的方法
2018/01/25 Python
python 删除非空文件夹的实例
2018/04/26 Python
使用pandas读取文件的实现
2019/07/31 Python
FFrpc python客户端lib使用解析
2019/08/24 Python
Python单元测试模块doctest的具体使用
2020/02/10 Python
使用CSS3制作一个简单的Chrome模拟器
2015/07/15 HTML / CSS
CSS3 Calc实现滚动条出现页面不跳动问题
2017/09/14 HTML / CSS
Zadig&Voltaire官网:法国时装品牌
2018/01/05 全球购物
酒店七夕情人节活动策划方案
2014/08/24 职场文书
药店采购员岗位职责
2014/09/30 职场文书
2014年政风行风工作总结
2014/11/22 职场文书
管理失职检讨书
2015/05/05 职场文书
婚庆司仪开场白
2015/05/29 职场文书
2015秋季开学典礼演讲稿
2015/07/16 职场文书
2016高中社会实践心得体会范文
2016/01/14 职场文书
2016年“11.11”光棍节活动总结
2016/04/05 职场文书
公文写作指导之倡议书!
2019/07/03 职场文书
祝福语集锦:给妹妹结婚的祝福语
2019/12/18 职场文书
golang 生成对应的数据表struct定义操作
2021/04/28 Golang
Python基于Tkinter开发一个爬取B站直播弹幕的工具
2021/05/06 Python
k8s部署redis cluster集群的实现
2021/06/24 Redis