对 Select 的各种操作(JQuery)
在写表单时,经常要用到select元素,这个元素相较于其他文本框标签而言有不同。最近在写一个页面表单时需要对select进行各种操作,现将其用法收集并总结如下:
HTML元素:
<select id="relationship" name="relationship" required="true">
<option value="1">父母</option>
<option value="2">夫妻</option>
<option value="3">子女</option>
<option value="4">朋友</option>
<option value="5">其他</option>
</select>
required 一般用在做校验判断当前选项内容是否为必填,加了required后页面会有相应的验证。
对其进行各种操作的jQ代码:
$(document).ready(function() {
//获取下拉框选中项的index属性值
var selectIndex = $("#relationship").get(0).selectedIndex;
alert(selectIndex); //绑定下拉框change事件,当下来框改变时调用 SelectChange()方法
$("#relationship").change(function() {
//todo
}); //获取下拉框选中项的value属性值
var selectValue = $("#relationship").val();
alert(selectValue); //获取下拉框选中项的text属性值
var selectText = $("#relationship").find("option:selected").text();
alert(selectText); //设置下拉框index属性为5的选项 选中
$("#relationship").get(0).selectedIndex = 5; //设置下拉框value属性为4的选项 选中
$("#relationship").val(4); //设置下拉框text属性为5的选项 选中
$("#relationship option[text=5]").attr("selected", "selected");
$("#yyt option:contains('5')").attr("selected", true); ////获取下拉框最大的index属性值
var selectMaxIndex = $("#relationship option:last").attr("index");
alert(selectMaxIndex); //在下拉框最前添加一个选项
$("#relationship").prepend("<option value='0'>领导</option>"); //在下拉框最后添加一个选项
$("#relationship").append("<option value='6'>同事</option>"); //移除下拉框最后一个选项
$("#relationship option:last").remove(); //移除下拉框 index属性为1的选项
$("#relationship option[index=1]").remove(); //移除下拉框 value属性为4的选项
$("#relationship option[value=4]").remove(); //移除下拉框 text属性为5的选项
$("#relationship option[text=5]").remove(); //清空下拉框
$("#relationship").empty();
});
对 Select 的各种操作(JQuery)的更多相关文章
- JQuery 对 Select option 的操作---转载
<select id="selectID" > <option value="1">1</option> <optio ...
- jQuery获取Radio选择的Value值||两个select之间option的互相添加操作(jquery实现)
jQuery获取Radio选择的Value值: 1. $("input[name='radio_name'][checked]").val(); //选择被选中Radio的Val ...
- SELECT控件操作的JS代码示例
SELECT控件操作的JS代码示例 1 检测是否有选中 if(objSelect.selectedIndex > -1) { //说明选中 } else { //说明没有选中 } 2.动态创建s ...
- jquery获得select option的值和对select option的操作
<body> <select name="month" id="selMonth" onchange="set()"> ...
- jquery获得select option的值 和对select option的操作
jQuery获取Select元素,并选择的Text和Value: 1. $("#select_id").change(function(){//code...}); //为Se ...
- jquery获得select option的值 和对select option的操作【转藏】
获取Select : 获取select 选中的 text : $("#ddlRegType").find("option:selected").text(); ...
- jquery关于Select元素的操作
jQuery获取Select元素,并选择的Text和Value: $("#select_id").change(function(){//code...}); ...
- JQuery对下拉列表Select的一些操作
1.假如select中存在选项,需要清空的情况: $("#search").find("option").remove(); $("#search&q ...
- JQuery 对 Select option 的操作
下拉框: <select id="selectID" > <option value="1">1</option& ...
随机推荐
- ios背景更新和下载
ios背景更新和下载 by 吴雪莹 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NS ...
- [翻译]MEAN.IO与MEAN.JS的前世今生
写在前面: 因为项目要求要学习mean,所以要从搭建环境开始,网上的教程不怎么多,但是感觉方法倒是不少,也没多想,就开始安装,运行起来发现怎么和安装教程中的目录结构不同? 想了好久,也翻看目录半天,总 ...
- ios 8 地图定位
在xcode6在 苹果公司定位方法改变地图,谁也无法使用 错误说明:Trying to start MapKit location updates without prompting for loca ...
- 检测浏览器版本类型的JavaScript代码,终极版
下面的JavaScript代码,不仅可以判断PC端浏览器类型,还可以判断安卓.iOS.其他智能手机.平板电脑或游戏系统. 说废话貌似不是我的风格哈,直接上代码吧: var client = funct ...
- OpenSUSE 13.2使用VPN(PPTP)
新年开始,有时查询个资料或是下个软件包并不是那么愉快,决定使用付费VPN,他们使用的是用户名及密码的验证方式 在网上找到了一个教程,挺详尽的,如果想按照步骤能使用即可的原则,跟着我一起设置,想了解更多 ...
- SD卡FAT32获得高速的文件格式(图文介绍)
说明: MBR :Master Boot Record ( 主引导记录) DBR :DOS Boot Record ( 引导扇区) FAT :File Allocation Table ( 文件分配表 ...
- C#边边角角(一)
前言 此篇为在学习C#基础时,熟悉C#的语法和高级特性的一些小的尝试和笔记,记录一下以供分享 集合初始化器 集合必须实现System.Collections.IEnumerable接口 集合必须包含A ...
- SQL Server 2008 允许远程链接,适用于广域网和局域网
用户在使用SQL Server 2008远程链接时,可能会弹出如下对话框: 在链接SQL服务器时发生网络链接错误或特定实例错误.SQL服务器不存在或者链接不成功.请验证用户名是否正确或SQL服务器是否 ...
- Eclipse编辑器样式修改
很多的开发工具都可以更改主题样式,但eclipse作为一款影响力巨大的开源开发工具,却没有自带更改样式的功能,这多少令人有点小遗憾.Eclipse 4之后,Eclipse使用者呼声高涨,就有人开始做起 ...
- (蓝牙)网络编程中,使用InputStream read方法读取数据阻塞的解决方法
问题如题,这个问题困扰了我好几天,今天终于解决了,感谢[1]. 首先,我要做的是android手机和电脑进行蓝牙通信,android发一句话,电脑端程序至少就要做到接受到那句话.android端发送信 ...