<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>私人定制</title>
<script type="text/javascript" src="JS/jquery-2.2.2.min.js"></script>
</head>
<body>
<div id="wrap">
<ul id="personal_list">
<li>
<span>选择蔬菜品种：</span>
<select name="selectVal" id="selectVal_a">
<optgroup label="椒类">
<option value="青椒">青椒</option>
<option value="二根条">二根条</option>
<option value="朝天椒">朝天椒</option>
<option value="红椒">红椒</option>
</optgroup>
</select>
</li>
<li id="choose_list">
<span>您已经选择：</span><br/>
</li>
<li>
</ul>
<script>
$(function() {
var x = 0;
//下拉框值发生改变会触发该事件
$("#selectVal_a").change(function() {
//获取到下拉框的值
var selecVal = $(this).val();
x++;
//添加文本框和删除按钮
$("#choose_list").append("<div id='choose_div'><span class='choose_span'style=' font-weight: 200;font-size: 16px;'>第" + x + "种蔬菜种类为:</span><input type='text' readonly='readonly' value='" + selecVal + "'></br><span class='choose_span'style=' font-weight: 200;font-size: 16px;'>重量为:</span><select><option value='1'>1kg~500kg</option><option value='2'>>500kg</option></select><button class='dele'>删除</button></div>");
//删除功能
$(".dele").click(function() {
//删除tr节点
$(this).parent().remove();
x--;
//禁止表单提交
return false;
});
})
});
</script>
</div>
</div>
</body>
</html>