JQuery操作select中的option

html页面代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

<style type="text/css">

* { margin:0; padding:0; }

div.centent {

float:left;

text-align: center;

margin: 10px;

}

span {

display:block;

margin:2px 2px;

padding:4px 10px;

background:#898989;

cursor:pointer;

font-size:12px;

color:white;

}

</style>

<!--  引入jQuery -->

<script src="../jquery/jquery-1.3.1.js" type="text/javascript"></script>

<script type="text/javascript">

$(function(){

//移到右边

$(‘#add‘).click(function() {

//获取选中的选项,删除并追加给对方

$(‘#select1 option:selected‘).appendTo(‘#select2‘);

});

//移到左边

$(‘#remove‘).click(function() {

$(‘#select2 option:selected‘).appendTo(‘#select1‘);

});

//全部移到右边

$(‘#add_all‘).click(function() {

//获取全部的选项,删除并追加给对方

$(‘#select1 option‘).appendTo(‘#select2‘);

});

//全部移到左边

$(‘#remove_all‘).click(function() {

$(‘#select2 option‘).appendTo(‘#select1‘);

});

//双击选项

$(‘#select1‘).dblclick(function(){     //绑定双击事件

//获取全部的选项,删除并追加给对方

$("option:selected",this).appendTo(‘#select2‘);     //追加给对方

});

//双击选项

$(‘#select2‘).dblclick(function(){

$("option:selected",this).appendTo(‘#select1‘);

});

});

</script>

</head>

<body>

<div class="centent">

<select multiple="multiple" id="select1" 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" >选中添加到右边&gt;&gt;</span>

<span id="add_all" >全部添加到右边&gt;&gt;</span>

</div>

</div>

<div class="centent">

<select multiple="multiple" id="select2" style="width: 100px;height:160px;">

<option value="8">选项8</option>

</select>

<div>

<span id="remove">&lt;&lt;选中删除到左边</span>

<span id="remove_all">&lt;&lt;全部删除到左边</span>

</div>

</div>

</body>

</html>

--------------------------------------------------------------------------------------------------

让指定option值的选项被选中:

<select id="userTypeSub" name="userTypeSub">

<option value="">全部</option>

<option value="0">接入号登录</option>

<option value="1">宽带号登录</option>

</select>

$("#userTypeSub").val("1");

或者

$(‘select[name="userTypeSub"] option[value="1"]‘).attr("selected", "true");

上述代码表示让 宽带号登录 被选中。

--------------------------------------------------------------------------------------------------

<script type="text/javascript">

var j$ = jQuery.noConflict();

</script>

j$(document).ready(

function(){

var date = new Date();

var preMonth = date.getMonth();

//让一个月被选中

j$("select[name=‘month‘] option[value=‘"+preMonth+"‘]").attr("selected",
"true");

}

);

<select name="month">

<option value="1">一月</option>

<option value="2">二月</option>

<option value="3">三月</option>

</select>

JQuery操作select中的option

时间: 2024-10-11 13:38:11

JQuery操作select中的option的相关文章

jQuery获取select中所有option值

<select id="language"> <option value="">请选择</option> <option value="Java">Java</option> <option value="PHP">PHP</option> <option value="Jekyll">Jekyll</op

Jquery操作select,左右移动,双击移动 取到所有option的值

$(function () { function MoveItem(fromId, toId) { $("#" + fromId + " option:selected").each(function () { $(this).appendTo($("#" + toId + ":not(:has(option[value=" + $(this).val() + "]))")); }); $("#&

js与jQuery操作select大全

Js操作Select是很常见的,也是比较实用的,每一次操作select的时候,总是要出来翻一下资料,不如自己总结一下,以后就翻这里了. 一.js操作select部分 判断select选项中 是否存在Value="paraValue"的Item 向select选项中 加入一个Item 从select选项中 删除一个Item 删除select中选中的项 修改select选项中 value="paraValue"的text为"paraText" 设置s

jquery 操作select,checkbox,radio (整理)

在工作中经常用到select,checkbox,radio,今天有点空闲就整理一下,免得以后用的时候还要重新找. 操作select下拉框 -- 获取值或选中项: 1, $("#select_id").change(function(){//code...});  //为Select添加事件,当选择其中一项时触发 2,var checkValue=$("#select_id").val(); //获取Select选择的Value 3,var checkText=$(&

JS/JQuery操作select下拉框

一.js 操作select 下拉框 var selObj = 下拉框对象 1. 移除所有项:selObj.options.length = 0; 2. 移除下拉框中的一项:selObj.options.remove(index); “index”为下拉框选项的索引值,若0索引项移出(自上而下),那么1索引项的索引会变为0,后面的索引依次向前推进 也可利用循环,移除所有项: var length = selObj.options.length; for(var i=length-1;i>=0;i-

JQuery操作select checkbox radio总结

JQuery是一个很强大的工具所以我要找到它最便捷的方法,嘻嘻 Select 增删改查: Select查: 1.val值: $("#selectid").val();       //最方便的 2.text值: $("#selectid option:selected").text();       //最方便的 或 $("#selectid").find("option:selected").text() 3.Index值:

Jquery获取select选中的option的文本信息

注意:下面用的$(this)代表当前选中的select框 第一种: $(this).children("option:selected").text(); 第二种: $(this).children("option:selected").html(); Jquery获取select选中的option的文本信息,布布扣,bubuko.com

Jquery操作select选项集合,判断集合中是否存在option

转载:http://www.cnblogs.com/pepcod/archive/2012/07/03/JavaScript.html Query获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 2. var checkText=$("#select_id").find("option:selecte

jquery新增,删除 ,修改,清空select中的option

jQuery获取Select选择的Text和Value: 1. var checkText=jQuery("#select_id").find("option:selected").text(); //获取Select选择的Text 2. var checkValue=jQuery("#select_id").val(); //获取Select选择的option Value 3. var checkIndex=jQuery("#sele