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

标签：io   使用   ar   c   on   cti   html   r   new   

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种写法等价

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

标签：io   使用   ar   c   on   cti   html   r   new   

原文地址：http://www.cnblogs.com/bigdesign/p/4006479.html