<!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>
<title>Jquery实现select中option的增删改
</title>
<script language="javascript" type="text/javascript" src="Scripts/jquery-1.4.2.js"></script>
<script language="javascript" type="text/javascript">
$(function () {
$("#Button1").click(function () {
$("#opt").get(0).selectedIndex = 1; //selectedIndex不能写成SelectedIndex
})
$("#Button2").click(function () {
//$("#opt option[text='Item3']").attr("selected", true);
$("#opt").val(3);
});
$("#Button3").click(function () {
//$("#opt").append("<option value='Value'>Text</option>"); //创建不带参数的option
var $option = $("<option" + " value=" + $(".txt").val() + ">" + $(".txt").val() + "</option>");
$("#opt").append($option);
});
$("#Button4").click(function () {
$("#opt option:last").remove();
});
$("#Button5").click(function () {
var $option = $("<option" + " value=" + $(".txt").val() + ">" + $(".txt").val() + "</option>");
var index = $("#opt").get(0).selectedIndex;
alert(index);
$("#opt option:eq("+index+")").replaceWith($option);//eq中有参数
});
});
</script>
</head>
<body>
<div>
<select id="opt" multiple="multiple" style="height:96px;width:85px">
<option value="1">Item1</option>
<option value="2">Item2</option>
<option value="3">Item3</option>
<option value="4">Item4</option>
<option value="5">Item5</option>
<option value="6">Item6</option>
</select>
<p id="p1"></p>
</div>
<div>
<input type="text" class="txt"/>
<p id="p2">
<input id="Button1" type="button" value="设置索引值为1的项被选中" />
<input id="Button2" type="button" value="设置Select的Value值为3的项被选中" />
<input id="Button3" value="Add" type="button" />
<input id="Button4" value="Delete" type="button" />
<input id="Button5" value="Update" type="button" /></p>
</div>
</body>
</html>
JS编辑图片
:http://www.360doc.com/content/10/0214/19/537626_15831728.shtml