根据下拉框生成控件列表

我们在开发的时候时常会遇到这样的情况。就是在添加数据的时候需要点击某个按钮增加一行或者增加一个对象等等。正好我这边遇到一个，写一个简单的 方便以后使用。

<div class="heading">
    内容信息
</div>
<div align="center" style="padding: 10px; background: #efefef; border-top- 1px;
border- 1px; border-style: solid; border-color: #d5dfe8;">
    行程天数
    <select name="traveldays" style=" 15%" runat="server" onchange="ChangeDay(this.value);">
        <option value="1">
            1
        </option>
        <option value="2">
            2
        </option>
        <option value="3">
            3
        </option>
        <option value="4">
            4
        </option>
        <option value="5">
            5
        </option>
        <option value="6">
            6
        </option>
        <option value="7">
            7
        </option>
        <option value="8">
            8
        </option>
    </select>
    天 注：选择天数后，自动生成对应天数行程安排表
</div>
<div  id="list"></div>
<div id="row" class="template" DataField="rowhead" style="display:none">
    <h3>
        第
        <span id="spday" DataField="spday">
        </span>
        天
    </h3>
    <table width="100%" border="1" cellpadding="0" cellspacing="0" bordercolor="#d5dfe8">
        <tr>
            <td class="aright" width="15%">
                途经
            </td>
            <td class="aleft">
                <input type="text" id="Way" runat="server" DataField="Way" style=" 90%"
                value="" />
            </td>
        </tr>
        <tr>
            <td class="aright">
                酒店住宿
            </td>
            <td class="aleft">
                <asp:DropDownList ID="HotelId" runat="server" DataField="HotelId">
                    <asp:ListItem Value="0">
                        请选择
                    </asp:ListItem>
                </asp:DropDownList>
                <span>
                    或
                </span>
                <input type="text" id="HotelOther" runat="server" DataField="HotelOther"
                style=" 60%" value="" />
            </td>
        </tr>
        <tr>
            <td class="aright">
                用餐
            </td>
            <td class="aleft">
                <asp:CheckBoxList ID="Eat" runat="server" DataField="Eat" RepeatDirection="Horizontal">
                    <asp:ListItem Value="1">
                        早餐
                    </asp:ListItem>
                    <asp:ListItem Value="2">
                        午餐
                    </asp:ListItem>
                    <asp:ListItem Value="3">
                        晚餐
                    </asp:ListItem>
                </asp:CheckBoxList>
            </td>
        </tr>
        <tr>
            <td class="aright">
                内容
            </td>
            <td class="aleft">
                <textarea name="PContent" runat="server" id="PContent" cols="100" rows="20">
                </textarea>
            </td>
        </tr>
    </table>
</div>
<input type="button" id="btnSave" onclick="SUB();" value="提交">

这个就是基础页面的html代码，其实就是隐藏一个模板，选择的时候根据数量来复制模板，但是有个关键的地方就是模板的ID值要随之增长。

下面是ID变更的JS

<script>
function ChangeDay(num) {
var tabDetail = $("#list");
tabDetail.html('');
	for (i=1;i<=num ;i++ )
	{		var obj = $("#row").clone(true).appendTo("#list");
	//在页面中找到相关的字段 并将其ID进行变更		

			obj.find("[DataField='Way']").attr({id: "Way" + i});
			obj.find("[DataField='HotelId']").attr({id: "HotelId" + i});
			obj.find("[DataField='HotelOther']").attr({id: "HotelOther" + i});
			obj.find("[DataField='Eat']").attr({id: "Eat" + i});
			obj.find("[DataField='PContent']").attr({id: "PContent" + i});
			obj.find("[DataField='spday']").attr({id: "spday" + i});
			$("#spday"+i).html(i);
			tabDetail.find("[DataField='rowhead']").attr({id: "row" + i});
			obj.show();
//最后画出模板文件                  此方法适合克隆行
	}
}
</script>

当然了 这个就是找到模板里面的控件对每个控件的ID进行重新赋值，以便后面对那些ID控件要操作的时候使用。

咱们继续。

当点击继续的时候，当然是获取里面的数据了  看看如何获取吧。

<script>
function SUB(){

 var tabDetail = $("#list");
        var attendenceData = new Array();
        var tb = $("#list").find("table");
        if (tb.length <= 1) {
            alert("没有数据填写！");
            return;
        }
        var flg = false;
        var ff = false;
        tb.each(function (i) {

            if (!(i == 0)) {
                if (tabDetail.find("[DataField='Way']").length > 0) {
                    var jsonData = XTCore.Form.GetDivFormData($(this));
					
                    if (jsonData["Way"] != 0) {
                        attendenceData.push(jsonData);
                    } else {

                        flg = true;

                    }
                    if (jsonData["Way"] == "") {
                        ff = true;
                    }

                }
            }
        });
        if (flg) {
            alert("请填写途经！");
            return;
        }
        if (ff) {
            alert("对不起，请检查是否有途经没有填写！");
            return;
        }
        var jsonDataString = $.toJSON(attendenceData);
        return;
}

</script>

GetDivFormData这个东西是我这边封装的一个JS方法从DIV中根据DataField获取里面的数据
 GetDivFormData: function (div) {
        var data = {};
        div.find("[DataField]").each(function (i) {
            data[$(this).attr("DataField")] = XTCore.Form.GetControlData($(this));
        });
        return data;
    }

 GetControlData: function (control) {
        var data = "";
        switch ($(control).attr("tagName")) {
            case "TEXTAREA":
            case "INPUT":
                {
                    if ($(control).attr("type") == "checkbox") {
                        data += $(control).attr("checked");
                    }
                    else
                        data += $(control).val();

                }
                break;
            case "SPAN":
                {
                    data += $(control).text();
                }
                break;
            case "SELECT":
                {
                    data += $(control).val();
                }
                break; default:
                data += $(control).val();
                break;
        }
        return XTCore.Form.ConvertToJson(data);
    },
    ConvertToJson: function (s) {
        s = s.replace(/(\\|\"|\')/g, "\\$1")
                    .replace(/\n|\r|\t/g,
                    function () {
                        var a = arguments[0];
                        return (a == '\n') ? '\\n' :
                           (a == '\r') ? '\\r' :
                           (a == '\t') ? '\\t' : ""
                    });
        return s;
    },

最后的

 var jsonDataString = $.toJSON(attendenceData);这个当然就是获取到的JSON串了。至于需要做什么样的操作那就看你自己了。有什么疑问就回复吧，如果你有更好的方法也可以给我说一下

这样也让我少走弯路。:-)

对了 还差句话，这个页面当然要引用Jquery哦