动态添加选项值（限定添加个数：10个）

    <script type="text/javascript">
        //选项卡添加与删除
        var count = 1;
        function add(my) {
            var id = my.id;
            var tr = "<tr>"
   + "<td><input id='txt'" + count + "'' type='text' /></td>"
   + "<td><input id='btnadd" + count + "' type='button' value='  +  ' onclick='add(this)' /><input id='btndel' + count + ' type='button' value='  -  ' style='display:none;' onclick='del(this)' /></td>"
            "</tr>";
            if (count < 10) {
                $("#" + id).parent().parent().parent().find(":button[value='  +  ']").css({ "display": "none" });
                $("#" + id).parent().parent().parent().find(":button[value='  -  ']").css({ "display": "" });
                $("#addTr").append(tr);
                count++;
            } else {
                alert("选项值最多只能添加10个");
            }
        }

        function del(my) {
            var id = my.id;
            $("#" + id).parent().parent().remove();
            count--;
        }

 

        //初始化页面时加载数据显示选项值
        $(function () {
            var optionList = 'a,b,c,d,e,f,g,h,i,j';
            var arry = optionList.split(',');
            count = arry.length;
            if (arry.length > 0) {
                for (var i = 0; i < arry.length; i++) {
                    var tr = "<tr><td><input id='txt'" + i + "'' type='text' class='txtclass' value='" + arry[i] + "' /></td>";
                    if (i != arry.length - 1) {
                        tr += "<td><input id='btnadd" + i + "' type='button' value='  +  ' onclick='add(this)' style='display:none;' /><input id='btndel" + i + "' type='button' onclick='del(this)' value='  -  ' /></td>";
                    }
                    else {
                        tr += "<td><input id='btnadd" + i + "' type='button' value='  +  ' onclick='add(this)' /><input id='btndel" + i + "' type='button' onclick='del(this)' value='  -  ' style='display:none;' /></td>";

                    }
                    tr += "</tr>";
                    $("#addTr").append(tr);
                }
            }
            else {
                var tr = '<tr><td><input id="txt0" type="text" /> </td>'
                tr += '<td><input id="btnadd0" type="button" value="  +  " onclick="add(this)" /><input id="btndel0"'
                tr += ' type="button" value="  -  " style="display: none;" onclick="del(this)" /></td> </tr>';
                $("#addTr").append(tr);
            }
        });

        //保存 (选项值的非空判断、每个选项值不能相同)
        function save() {
            var option_value = "";
            var OptionValue

            var count = 1;
            var flag = false;
            $("#addTr").find(":input[type='text']").each(function () {

                if (this.value.toString().indexOf("_") > -1) {
                    alert("选项值不能包含‘_’符号");
                    return;
                }
                if (this.value != "") {
                    if (option_value.indexOf(this.value) >= 0) {
                        flag = true;
                    }
                    option_value += this.value + "_";
                }

            });
            if (option_value == "") {
                alert("选项值不能为空！");
                return;
            }
            if (flag) {
                alert("选项值不能相同！");
                return;
            }

        }

    </script>

 

页面代码：

<div>
        <table id="addTr">
            <tr>
                <td>
                </td>
                <td>
                </td>
            </tr>
        </table>
        <button type="button" onclick="save();">
            保存</button>
    </div>