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 οnclick="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" οnclick="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;

    width:10px;

    height:10px;

    vertical-align: middle;

    margin-left:2px;

}