JQuery select标签操作代码段

下面几个常用的代码或许对您有帮助：


代码如下:

//1.获取选中option值
$('#selectList').val();
//2.获取选中option的文本
$('#selectList :selected').text();
//3.获取多个选中option值、文本
var foo = [];
$('#multiple :selected').each(function(i, selected) {
foo[i] = $(selected).text();
});
// to get the selected values, just use .val() - this returns a string or array
foo = $('#multiple :selected').val();
//4.使用选项option的条件表达式
switch ($('#selectList :selected').text()) {
case 'First Option':
//do something
break;
case 'Something Else':
// do something else
break;
}
//5.删除某个value=2的option
$("#selectList option[value='2']").remove();
//6.从list A 移动option到 list B.
// here we have 2 select lists and 2 buttons. If you click the “add” button,
// we remove the selected option from select1 and add that same option to select2.
// The “remove” button just does things the opposite way around.
// Thanks to jQuery's chaining capabilities, what was once a rather tricky undertaking with JS can now be done in 6 lines of code.
$().ready(function() {
$('#add').click(function() {
return !$('#select1 option:selected').appendTo('#select2');
});
$('#remove').click(function() {
return !$('#select2 option:selected').appendTo('#select1');
});
});

如果您不了解JQuery，可以先看它的文档。

赞 (0)

相关推荐

  • jquery select下拉框操作的一些说明

    复制代码 代码如下: //==========测试代码=============== <head runat="server"> <title>下拉框测试</title> <script type="text/javascript" src="/js/jquery/jquery-1.3.js"></script> <script type="text/javascript

  • jQuery select操作控制方法小结

    需要注意的是,这里的代码好多是针对jquery 1.32以前的版本(以后的版本已经不支持@),所以替换为空测试下即可. jQuery获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 2. var checkText=$("#select_id").find("option:selected"

  • JQuery 操作select标签实现代码

    下面几个常用的代码或许对您有帮助: 复制代码 代码如下: //1.获取选中option值 $('#selectList').val(); //2.获取选中option的文本 $('#selectList :selected').text(); //3.获取多个选中option值.文本 var foo = []; $('#multiple :selected').each(function(i, selected) { foo[i] = $(selected).text(); }); // to

  • Jquery Select操作方法集合脚本之家特别版

    jQuery这个框架方便了我们对于HTML元素的操作,本来以为自己对于Select操作也算是熟悉了,但上午在测试的时候才发现自己了解的还真不多. 看了一下jQuery的一些方法后,理出了一些常用的方法,列在下面: //获取第一个option的值 $('#test option:first').val(); //最后一个option的值 $('#test option:last').val(); //获取第二个option的值 $('#test option:eq(1)').val(); //获取

  • js操作select控件的几种方法

    1判断select选项中 是否存在Value="paraValue"的Item 2向select选项中 加入一个Item 3从select选项中 删除一个Item 4删除select中选中的项 5修改select选项中 value="paraValue"的text为"paraText" 6设置select中text="paraText"的第一个Item为选中 7设置select中value="paraValue&qu

  • 利用jquery操作select下拉列表框的代码

    例: 复制代码 代码如下: <select id="sltList" name="list"> <option value="1">张三</option> <option value="2">李四</option> </select> // 获取当前选中的option值 $('#sltList').val() //获取当前选中项的文本 $('#sltLis

  • Jquery操作radio,checkbox,select表单操作实现代码

    Jquery操作radio,checkbox,select表单操作实现代码

    一 .Select jQuery获取Select选择的Text和Value: 1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 2. var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text 3. var checkValue=$("#s

  • JQuery select标签操作代码段

    下面几个常用的代码或许对您有帮助: 复制代码 代码如下: //1.获取选中option值 $('#selectList').val(); //2.获取选中option的文本 $('#selectList :selected').text(); //3.获取多个选中option值.文本 var foo = []; $('#multiple :selected').each(function(i, selected) { foo[i] = $(selected).text(); }); // to

  • jQuery select的操作实现代码

    //改變時的事件 复制代码 代码如下: $("#testSelect").change(function(){ //事件發生 jQuery('option:selected', this).each(function(){ //印出選到多個值 alert(this.value); }); }); //印出選到的項目 复制代码 代码如下: 法1:$("select#Clubs").children("[@selected]").each(funct

  • php中的mongodb select常用操作代码示例

    前面说到了mongodb安装,配置,集群,以及php的插入与更新等,请参考:mongodb. 下面说一下,mongodb select的常用操作 测试数据: 复制代码 代码如下: { "_id" : 1, "title" : "红楼梦", "auther" : "曹雪芹", "typeColumn" : "test", "money" : 80,

  • JQuery SELECT单选模拟jQuery.select.js

    基于jQuery JavaScript Library v1.3.2 的单选模拟 (本文件是跟据 zhangjingwei 的Jquery Select(单选) 模拟插件 V1.3.4 修改而来的) a. 修改的主要原因是,原来的zhangjingwei的模拟在显示方式上的问题.在跟文字交替出现时会出现错位.现将模拟DIV的display修改为inline方式.更自然的嵌入到文本行中. b.在加载文件后自动转化样式名为'commonselect' 的select.简化调用 c.对select的o

  • jquery select操作的日期联动实现代码

    Jquery的选择器很强大,对select的options对象添加的时候我找了老半天才找到 复制代码 代码如下: /**//* 文件名:jquery.liu.select.js 功能说明:本js文件为jquery类库的一个插件,主要实现对select的操作. 作者:John Liu 编写日期:2008/03/12 */ //得到select项的个数 jQuery.fn.size = function() { return jQuery(this).get(0).options.length; }

  • jquery操作select option 的代码小结

    1.获取选中select的value和text,html代码如下: 复制代码 代码如下: <select id="mySelect"> <option value="1">one</option> <option value="2">two</option> <option value="3">three</option> </selec

  • JQuery select控件的相关操作实现代码

    获取select 先看看下面代码: 复制代码 代码如下: $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text var checkValue=$("#select_id").val

  • 基于Jquery的标签智能验证实现代码

    后经过一段对Jquery的学习,Jquery的强大解决了辅助代码过多不易维护的问题.AutoValidate.JS 复制代码 代码如下: /// <reference path="../Scripts/jquery-1.4.1-vsdoc.js" /> //验证方法 v1.0,创建于2010-12-9 完成2010-12-16 MR.X 制 //修改2010-12-10.2010-12-12.2010-12-15.2010-12-16添入信息提示动画效果 //支持 type

随机推荐