드롭다운 상자에 따라 컨트롤 목록 생성하기

우리는 개발할 때 자주 이런 상황을 만날 수 있다.데이터를 추가할 때 어떤 단추를 눌러서 줄을 늘리거나 대상을 늘리는 등이다.마침 이쪽에서 하나를 만났는데, 간단하고 편리하게 써서 나중에 사용하자.

<div class="heading">

        

</div>

<div align="center" style="padding: 10px; background: #efefef; border-top-width: 1px;

border-width: 1px; border-style: solid; border-color: #d5dfe8;">

        

    <select name="traveldays" style="width: 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="width: 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="width: 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(/
|\r|\t/g,

                    function () {

                        var a = arguments[0];

                        return (a == '
') ? '\
' :

                           (a == '\r') ? '\\r' :

                           (a == '\t') ? '\\t' : ""

                    });

        return s;

    },

  
라스트
 var jsonDataString = $.toJSON(attendenceData);          JSON  。                  。         ，                 
  
         。:-)
  
       ，         Jquery