添加或删除项并动态记录项的值

JS方法

        function addSelCont() {

            var provinceObj = $('#<%=ddlarea.ClientID %>');
            var cityObj = $('#<%=ddlarea2.ClientID %>');

            var provinceId =provinceObj.val();
            var cityId = cityObj.val();

            var provincetName = provinceObj.find("option:selected").text();
            var cityName = cityObj.find("option:selected").text();
            if (cityId =='') cityName = '';

            if (provinceId !='') {
                $('#selcont').append(

                $('#hidformat').html().format(provincetName, cityName,provinceId,cityId)
            );

                var selObj = $('#<%=hidSelAreaval.ClientID %>');
                var newval = selObj.val();
                if (selObj.val() != '') newval += ',';
 
                selObj.val(newval + provinceId + '|' + cityId);
            }
        }

        function selAreaRemove(provinceId, cityId, obj) {
      
            var selObj = $('#<%=hidSelAreaval.ClientID %>');

            var re = ',' + provinceId + '|' + cityId + ',';
            var newval = (',' + selObj.val() + ',').replace(re, ',');


            newval = newval.replace(/^,+|,+$/g, '');
            selObj.val(newval);
 
            $(obj).parent().remove();

        }

ASPX页面

                        <div id="hidformat" style="display:none">
                                         <div class="sel_area">{0}&nbsp;{1}<span onclick="selAreaRemove('{2}','{3}',this)"></span></div>
                                    </div>
                                    <div class="item">
                                        <div style="float: left">
                                            我已经选择了：</div>
                                        <div id="selcont"></div>
                                    </div>
                                    <div class="item">
                                        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                                            <ContentTemplate>
                                        <asp:DropDownList ID="ddlarea" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddlarea_SelectedIndexChanged">
                                        </asp:DropDownList>
                                        <asp:DropDownList ID="ddlarea2" runat="server">
                                                <asp:ListItem Value="0">城市</asp:ListItem>
                                        </asp:DropDownList>
                                        <span class="ai_item_sub" onclick="addSelCont()" style=" cursor:pointer">增加</span>
                                              </ContentTemplate>
                                         </asp:UpdatePanel>
                                        <asp:HiddenField ID="hidSelAreaval" runat="server" Value="" />
                                    </div>

CSS样式

 .sel_area {
    background: url(../images/ai_05.png) no-repeat right center;
    float: left;
    margin-left:20px;
}
 .sel_area span{
    cursor: pointer;
    display: inline-block;
    10px;
    height:10px;
    vertical-align: middle;
    margin-left:2px;
}