弹出框取舍完后将内容以带关闭的小框展现,并可以获取其值

弹出框选择完后将内容以带关闭的小框展现,并可以获取其值
弹出框取舍完后将内容以带关闭的小框展现,并可以获取其值选择完后确定,让选中的内容以弹出框取舍完后将内容以带关闭的小框展现,并可以获取其值方式展现,点X可以删除,并且我还可以将展现的数据插入数据库,请问如何能实现

------解决方案--------------------
   1.你这个窗体之下应该还有个窗体吧,把父窗体的某个变量设置为public,然后把子窗体一个变量设置为父窗体,然后在子窗体选的时候对应修改父窗体的那个变量,这样可以获得你在子窗体选的哪个了。
   2.子窗体上直接把数据更新到数据库,关闭子窗体的时候同时更新父窗体。
不难,自己多想想吧。刚开始想的方法可能很笨,慢慢简化就好。
------解决方案--------------------

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" src="script/jquery-1.7.1.min.js">
    </script>
    <script type="text/javascript">
        $(function () {
            $("input[type='checkbox']").click(function () {
                if (this.checked == true) {
                    var div = $("<div class='checkvalue' value='" + $(this).attr("value") + "'>" + $(this).attr("value") + "</div>");
                    $("#titlelist").append(div);
                } else {
                    var child = $("#titlelist").children("div[value='" + $(this).attr("value") + "']");
                    $(child).remove();
                }
            });
        });
        function showValue() {
            var valueList = $(".checkvalue");
            for (var i = 0; i < valueList.length; i++) {
                alert($(valueList[i]).attr("value"));
            }
        }
    </script>
    <style type="text/css">
        .checkvalue {
            float: left;
            height: 20px;
            width: 60px;
            border: 1px solid black;
            margin-left: 10px;
        }
    </style>
</head>
<body>
    <div id="titlelist"></div>
    <br />
    <div>
        <ul>
            <li>
                <input type="checkbox" value="萌妹子" />萌妹子</li>
            <li>
                <input type="checkbox" value="正太" />正太</li>
            <li>
                <input type="checkbox" value="大叔" />大叔</li>
            <li>
                <input type="checkbox" value="兄贵" />兄贵</li>