jquery操作select的一些基本方法总结

T1 >>> 创建一个新的select
var $newSelect = $("<select id=\"sel\" name=\"s_name\"></select>"); // 注意转义\

T2 >>> 创建一个新的option
var $option = $("<option value=\"value\">1</option>");

T3 >>> 将option添加进数组 options
方式一:
$newSelect.append($option);
方式二:
$newSelect.append("<option value=\"value\">1</option>"); // 添加到 option 序列最后
方式三:
$newSelect.prepend("<option value=\"value\">1</option>"); // 添加到 option 序列最前
// 不支持option索引值溢出添加新的option

T4 >>> 将select添加到页面
$newSelect.appendTo(‘body‘);
$newSelect.appendTo($(‘body‘));
$(‘body‘).append($newSelect);

// append() 和 appendTo() 方法执行的任务相同。
// 不同之处在于:内容和选择器的位置,以及 append() 能够使用函数来附加内容。
$(selector).append(function(index,html))

T5 >>> 清除select的option选项
$("#sel option[value=‘1‘]").remove(); // 移除 value 值为 1 的 option
$("#sel option[index=2]").remove(); // 移除索引为 2 的 option
$("#sel option[text=‘_txt‘]").remove(); // 移除 text 值为 _txt 的 option
$("#sel option:last").remove(); // 移除最后的 option
$("#sel option:selected").remove(); // 移除selected选中的 option

T6 >>> 修改select的option选项

// 选中项的 text 值
newSelect.find(‘option:selected‘).text();

// 选中项的Value值
$newSelect.val()
$newSelect.find(‘option:selected‘).val();
$(‘select[name="s_name"]‘).find(‘option:selected‘).val();

// 任意项的 text val 值
$newSelect.find(‘option‘).eq(index).text();
$newSelect.find(‘option‘).eq(index).val();

$newSelect.children(‘option‘).eq(index).text();
$newSelect.children(‘option‘).eq(index).val();

$("#sel option[value=‘1‘]").text();
$("#sel option[value=‘1‘]").val();

$("#sel option[index=2]").text();
$("#sel option[index=2]").val();

$("#sel option[text=‘_txt‘]").text();
$("#sel option[text=‘_txt‘]").val();

// 输出 option 序列的所有 text 值。
$newSelect.text()

// 输出 select 被选中的索引值 。
$("#sel").get(0).selectedIndex; // get(0) 将jquery对象转化为DOM形式。
$("#sel option:selected").index()

// 获取 option 的长度值
$("#sel option").length
$newSelect.find(‘option‘).length
$newSelect.children(‘option‘).length

>>> 整个流程
<script>
var $newSelect = $("<select id=\"sel\"></select>");
var $option = $("<option value=\"1\">1</option>");
$(‘body‘).append($newSelect);
$newSelect.append($option);
</script>

注:有时候用到的jquery和Dom元素的一些转换方式:
$(this)[0]
$(this).get(0)
$(this).toArray()[0];
以上3种写法等价

时间: 2024-12-18 12:34:15

jquery操作select的一些基本方法总结的相关文章

JQuery操作select checkbox radio总结

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

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,左右移动,双击移动 取到所有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中的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=&q

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=$(&

jquery操作select的各种方法

在工作中,有时候会遇到给select组件添加一些事件,前两天发表了一篇文章,<用jquery给select加选中事件>大致阐述了简单的jq操作select的方法,但是为了详细的介绍一下select,争取让大家把它吃透,也为了和脑残的IE作斗争,于是有了这篇文章的诞生. 一.使用jquery获取select元素(value和option里的内容) 1. var checkText=$("#select_id").find("option:selected"

jquery操作select下拉框的多种方法(选中,取值,赋值等)

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

jQuery操作select下拉框的text值和value值的方法

1.jquery获取当前选中select的text值 var checkText=$("#slc1").find("option:selected").text(); 2.jquery获取当前选中select的value值 var checkValue=$("#slc1").val(); 3.jquery获取当前选中select的索引值 var index=$("#slc1 ").get(0).selectedIndex; 4