<div class="container">

​

    <div class="row">

      <div class="col-lg-6">

        <!-- Default input -->

        <label for="exampleForm2">Default input</label>

        <input type="text" id="exampleForm2" class="form-control cascader">

​

        <!--first--><!--

        -->

        <!--first-->

​

        <div class="cascader-list main-list">

​

        </div>

​

      </div>

    </div>

​

  </div>

.main-list

{

    display: none;

    position: absolute;

}

​

.sub-list

{

    display: none;

    position: absolute;

    transform: translateX(100%);

    right: 0;

    top: 0;

}

​

.list-group-item

{

    text-transform:capitalize;

    margin: 0 2px;

    cursor: pointer;

    width: 150px;

}

​

#exampleForm2{

    text-transform:capitalize;

}

​

​

var country = {

    polska: {

        lodzkie: ["Łódź", "Łowicz", "Sochaczew"],

        mazowieckie: ["warszawa"],

        slaskie: ["katowice", "chorzów"]

    },

    usa: {

        alaska: ["city1", "city2"],

        minessota: ["city1", "city2"]

    }

};

​

​

$(document).ready(function () {

​

    var $cascader = $(".cascader");

    var $cascaderList = $(".cascader-list");

    var $inputCascader = $("#exampleForm2");

​

​

​

    for (var i in country) {

        //console.log("Country: " + i);

        var $ul = $('<ul class="list-group sub-list ">');

        var $li = $('<li class="list-group-item list-group-item-action st">');

        var $arrow = $('<i class="fas fa-angle-right float-right mt-1"></i>');

        var $one = $(document.createDocumentFragment());

        for (var j in country[i]) {

            //console.log(i + ": " + j);

            var $ul2 = $('<ul class="list-group sub-list ">');

            var $li2 = $('<li class="list-group-item list-group-item-action nd">');

            var $arrow2 = $('<i class="fas fa-angle-right float-right mt-1 "></i>');

            var $two = $(document.createDocumentFragment());

            for (var k = 0; k < country[i][j].length; k++) {

                //console.log(j + ": " + country[i][j][k]);

​

                var $li3 = $('<li class="list-group-item list-group-item-action rd">');

​

​

                $two.append($li3.text(country[i][j][k]+" "));

            }

​

            $one.append($li2.text(j+" ").append($arrow2).append($ul2.append($two)));

​

        }

​

        $cascaderList.append($li.text(i+" ").append($arrow).append($ul.append($one)));

    }

​

    $cascader.on("click", function () {

        $(".main-list").slideDown(200);

    });

​

    $(".list-group-item.st").on("click", function(){

        $(".list-group-item.st").removeClass("active");

        $(".list-group-item.st").find("> ul").hide(0);

        $(this).addClass("active");

        $(this).find("> ul").show(0);

    });

​

    $(".list-group-item.nd").on("click", function(){

        $(".list-group-item.nd").removeClass("active");

        $(".list-group-item.nd").find("> ul").hide(0);

        $(this).addClass("active");

        $(this).find("> ul").show(0);

    });

​

    $(".list-group-item.rd").on("click", function(){

        $(".list-group-item.rd").removeClass("active");

        $(this).addClass("active");

​

        var one=$(this).text().trim();

        var twoT, threeT;

        twoT = $(this).parent().parent().text().split(" ");

        var two = twoT[0].trim();

        threeT = $(this).parent().parent().parent().parent().text().split(" ");

        var three = threeT[0].trim();

​

        $inputCascader.val(three+"/"+two+"/"+one);

​

        $(".main-list").slideUp(200);

    });

​

​

});

​