在写表单时,经常要用到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)的更多相关文章

  1. JQuery 对 Select option 的操作---转载

    <select id="selectID" > <option value="1">1</option> <optio ...

  2. jQuery获取Radio选择的Value值||两个select之间option的互相添加操作(jquery实现)

    jQuery获取Radio选择的Value值: 1. $("input[name='radio_name'][checked]").val();  //选择被选中Radio的Val ...

  3. SELECT控件操作的JS代码示例

    SELECT控件操作的JS代码示例 1 检测是否有选中 if(objSelect.selectedIndex > -1) { //说明选中 } else { //说明没有选中 } 2.动态创建s ...

  4. jquery获得select option的值和对select option的操作

    <body> <select name="month" id="selMonth" onchange="set()"> ...

  5. jquery获得select option的值 和对select option的操作

    jQuery获取Select元素,并选择的Text和Value: 1. $("#select_id").change(function(){//code...});   //为Se ...

  6. jquery获得select option的值 和对select option的操作【转藏】

    获取Select : 获取select 选中的 text : $("#ddlRegType").find("option:selected").text(); ...

  7. jquery关于Select元素的操作

    jQuery获取Select元素,并选择的Text和Value: $("#select_id").change(function(){//code...});           ...

  8. JQuery对下拉列表Select的一些操作

    1.假如select中存在选项,需要清空的情况: $("#search").find("option").remove(); $("#search&q ...

  9. JQuery 对 Select option 的操作

    下拉框: <select id="selectID" >         <option value="1">1</option& ...

随机推荐

  1. ios背景更新和下载

    ios背景更新和下载 by 吴雪莹 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NS ...

  2. PCL点云库中怎样读取指定的PCD文件,又一次命名,处理后保存到指定目录

    我一直想把处理后的pcd文件重命名,然后放到指定的目录,尝试了好久最终做到了: 比方我想读取  "table_scene_lms400.pcd" 把它进行滤波处理,重命名为 &qu ...

  3. Java 多线程之happens-before规则解释

    关于happens-before规则的解释网上有很多,我就不敢班门弄斧了.贴出两篇不错的文章以供学习. 1.happens-before俗解 2.深入Java内存模型--happen-before规则

  4. leetcode第19题--Remove Nth Node From End of List

    Problem: Given a linked list, remove the nth node from the end of list and return its head. For exam ...

  5. SQL SERVER – Import CSV File Into SQL Server Using Bulk Insert – Load Comma Delimited File Into SQL Server

    CSV stands for Comma Separated Values, sometimes also called Comma Delimited Values. Create TestTabl ...

  6. TRIGGER的使用(修改SP自动触发)

    CREATE TRIGGER [trg_save_change_SP] ON DATABASE FOR CREATE_PROCEDURE, ALTER_PROCEDURE,DROP_PROCEDURE ...

  7. Strategic Game HDU

    Strategic Game                                                         Time Limit: 20000/10000 MS (J ...

  8. Objective-c 总结(一):OC类的设计

    (一)学习目标: 1.面向对象基本概念: OOP的主要思想是把构成问题的各个事务分解成各个对象,建立对象的目的不是为了完成一个步骤,而是为了描述一个事物在整个解决问题步骤中的行为. 2.熟悉OC类的定 ...

  9. Java多线程学习笔记——从Java JVM对多线程数据同步的一些理解

       我们知道在多线程编程中,我们很大的一部分内容是为了解决线程间的资源同步问题和线程间共同协作解决问题.线程间的同步,通俗我们理解为僧多粥少,在粥有限情况下,我们怎么去防止大家有秩序的喝到粥,不至于 ...

  10. 列表类型转换(ConvertList<TSource, TResult>)

    性能优化-列表类型转换(ConvertList<TSource, TResult>) 2013-12-16 16:55 by stevey, 426 阅读, 7 评论, 收藏, 编辑 之前 ...