首页 > 代码库 > jquery操作select的一些基本方法总结
jquery操作select的一些基本方法总结
T1 >>> 创建一个新的select
var $newSelect = $("<select id=\"sel\" name=\"s_name\"></select>"); // 注意转义\
T2 >>> 创建一个新的option
var $option = $("<option value=http://www.mamicode.com/"value\">1</option>");
T3 >>> 将option添加进数组 options
方式一:
$newSelect.append($option);
方式二:
$newSelect.append("<option value=http://www.mamicode.com/"value\">1</option>"); // 添加到 option 序列最后
方式三:
$newSelect.prepend("<option value=http://www.mamicode.com/"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=http://www.mamicode.com/‘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=http://www.mamicode.com/‘1‘]").text();
$("#sel option[value=http://www.mamicode.com/‘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=http://www.mamicode.com/"1\">1</option>");
$(‘body‘).append($newSelect);
$newSelect.append($option);
</script>
注:有时候用到的jquery和Dom元素的一些转换方式:
$(this)[0]
$(this).get(0)
$(this).toArray()[0];
以上3种写法等价
jquery操作select的一些基本方法总结