jquery 操作表单

最新推荐文章于 2024-09-25 16:24:42 发布

原创最新推荐文章于 2024-09-25 16:24:42 发布 · 271 阅读

0 ·

CC 4.0 BY-SA版权

Jquery 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用jQuery操作HTML中的Select元素，包括获取和设置选项的text和value值、添加和删除选项等。同时涵盖单选框和复选框的基本操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 select

<span style="font-size:14px;"><span style="font-size:14px;"><select id="select_1" name="select_2" />
	<option value="1">动物</option>
	<option value="2">植物</option>
</select></span></span>

1) 获取select的text和value

$("#select_1").change(function(){}); //为select添加事件,选择一项就触发

var text = $("#select_1").find("option:selected").text(); //获取select选择的text

var value=$("#select_1").val(); //获取选择的value

var index=$("#select_1").get(0).selectedIndex; //获取选择的索引值

var maxIndex=$("#select_1 option:last").attr("index"); //获取最大的索引值

2)设置select的text和value

$("#select_1").get(0).selectedIndex=1; //设置索引为1的选中

$("#select_1").val(4); //设置value=4的选中

$("#select_1 option[text='123']").attr("selected",true); //设置select的text值为"123"的选中

3)添加删除select的option

$("#select_1").append("<option value="123">123</option>"); //追加一个option

$("#select_1").prepend("<option value='0'>请选择</option>"); //第一个位置插入一个option

$("#select_1 option:last").remove(); //删除最大的索引项(最后一个)

$("#select_1 option[index='0']").remove();

$("#select_1 option[value='123']").remove();

$("#select_1 option[text='4']").remove();

2 单选框

<span style="font-size:14px;"><span style="font-size:14px;"><input type="radio" id="radio_1" name="radio_1" value="冰淇淋" />我要吃冰淇淋</span></span>

3复选框

<span style="font-size:14px;"><span style="font-size:14px;"><input type="checkbox" id="radio_1" name="radio_1" value="bike" checked="checked" />I have a bike
<input type="checkbox" id="radio_2" name="radio_2" value="car" />I have a car</span></span>

1 选中bike

$(":checkbox[name=radio_1]").attr("checked", true);

2 反选

$(":checkbox").each(function(){

$(this).attr("checked", !$(this).attr("checked"));

});

3 全不选