<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Treeview jQuery Plugin Example</title>
    <link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
    <link type="text/css" rel="stylesheet"
        href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" />
    <link type="text/css" rel="stylesheet"
        href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" />

    <style>
    body {
        background-color: #333;
        color: #fff;
    }

    .btn {
        color: #fff;
    }

    .container {
        margin: 150px auto;
    }
    </style>
</head>

<body>
    <div id="jquery-script-menu">

    </div>
    
    <div class="container">
        <h1>Treeview jQuery Plugin Example</h1>
        <div class="row">
            <div class="col-lg-3">
                <div id="treeview-container">
                    <ul>
                        <li data-value="1">Tree View Item 1</li>
                        <li data-value="1.a">Tree View Item 2
                            <ul>
                                <li data-value="2">Tree View Item 2.1</li>
                                <li data-value="2.2">Tree View Item 2.2
                                    <ul>
                                        <li data-value="2.2.1">Tree View Item 2.2.1</li>
                                        <li data-value="2.2.2">Tree View Item 2.2.2</li>
                                        <li data-value="2.2.3">Tree View Item 2.2.3</li>
                                    </ul>
                                </li>
                                <li>Tree View Item 2.3</li>
                            </ul>
                        </li>
                        <li>Tree View Item 3
                            <ul>
                                <li data-value="3.1">Tree View Item 3.1</li>
                                <li data-value="3.2">Tree View Item 3.2</li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-lg-3">
                <div id="treeview-container1">
                    <ul>
                        <li data-value="e">Tree View Item 1</li>
                        <li data-value="ee">Tree View Item 2
                            <ul>
                                <li data-value="eee">Tree View Item 2.1</li>
                                <li data-value="2.2">Tree View Item 2.2
                                    <ul>
                                        <li data-value="2.2.1">Tree View Item 2.2.1</li>
                                        <li data-value="2.2.2">Tree View Item 2.2.2</li>
                                        <li data-value="2.2.3">Tree View Item 2.2.3</li>
                                    </ul>
                                </li>
                                <li>Tree View Item 2.3</li>
                            </ul>
                        </li>
                        <li>Tree View Item 3
                            <ul>
                                <li data-value="3.1">Tree View Item 3.1</li>
                                <li data-value="3.2">Tree View Item 3.2</li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-lg-6">

                <br>

                <pre id="values" class="well"></pre>
                <pre id="values1" class="well"></pre>
            </div>
        </div>
        <input type="submit" value="www">
        </form>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
        <script src="Checkable-Collapsible-jQuery-Tree-View-Plugin-Treeview/dev/logger.js"></script>
        <script src="Checkable-Collapsible-jQuery-Tree-View-Plugin-Treeview/dev/treeview.js"></script>
        <link rel="stylesheet" href="">


    </div>
    <script type="text/javascript">
    $('#treeview-container').treeview({
        debug: true,

    });
    
    $('#treeview-container').on('change', function() {
        alert($('#treeview-container').treeview('selectedValues'));
        $('#values').text(
            $('#treeview-container').treeview('selectedValues')
        );
    });










    // $('#treeview-container1').on('change', function() {
    //     alert("5");
    //     $('#values1').text(
    //         $('#treeview-container1').treeview('selectedValues')
    //     );
    // });
    // $('#treeview-container').on('change', function() {
    //     alert($("ul").find(`[data-value='${current}']`))







    //     alert(  $('#treeview-container').treeview('selectedValues'));
    //     $('#values').text(
    //         $('#treeview-container').treeview('selectedValues')
    //     );
    // });
    // $('#treeview-container1').on('change', function() {
    //     alert(  $('#treeview-container1').treeview('selectedValues'));
    //     $('#values1').text(
    //         $('#treeview-container1').treeview('selectedValues')
    //     );
    // });
    // $('#treeview-container1').on('change', function() {
    //     alert("5");
    //     $('#values1').text(
    //         $('#treeview-container1').treeview('selectedValues')
    //     );
    // });
    // $("#treeview-container1").on("click", "a", function(e){
    // e.preventDefault();
    // var $this = $(this).parent();
    // $this.addClass("select").siblings().removeClass("select");
    // $("#sizevalue").val($this.data("value"));
    // })

    // $("form[name=size-form]").submit(function(e) {
    //     if ($(this).find("li.select").length == 0) {
    //         alert( "Please select a size." );
    //         e.preventDefault();
    //     }
    // });
    </script>





</body>

</html>