html - Need help to modify custom dropdown and change its value

Question

I have ceated a custom dropdown like below: enter image description here

Now on click on listed options, main value should change and a label should float top of it.

enter image description here

$(".custom-dropdown-main").click(function(){ 
  $(".custom-dropdown").toggle(); 
});

.create-new-budget-value-date {
    margin: 30px 0 10px;
    padding: 10px 0;
    border-top: 1px solid #d8d9dc;
    position: relative;
}

.create-new-budget-value-date:before {
    content: "";
    background: url(../images/up-arrow.png) no-repeat 0 0;
    position: absolute;
    top: -14px;
    left: 100px;
    width: 22px;
    height: 14px;
}

.new-budget-value-select {
    width: 250px;
    border: 1px solid #d8d9dc;
    border-radius: 5px;
    padding: 2px 10px;
    min-height: 45px;
}

.new-budget-value-select .custom-dropdown-main {
    display: block;
    text-decoration: none;
    margin-top: 10px
}

.new-budget-value-select .custom-dropdown-main .glyphicon-menu-down {
    float: right;
}

.new-budget-value-select .custom-dropdown {
    margin-top: 5px;
}

.new-budget-value-select .custom-dropdown .dropdown-item {
    display: block;
    padding: 3px 2px;
}

.new-budget-value-select a:hover {
    text-decoration: none;
}

.new-budget-value-select .custom-dropdown .dropdown-item:hover {
    background: #e6e6e6;
    color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="new-budget-value-select">
   <a class="custom-dropdown-main" href="#" id="custom-select">
   Budget <span class="glyphicon glyphicon-menu-down"></span></a>
   <div class="custom-dropdown" style="display: none;">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
   </div>
</div>

Answer 1

$(".custom-dropdown-main").click(function(){ 
  $(".custom-dropdown").toggle(); 
});

$(".custom-dropdown .dropdown-item").on('click', function() {
  $(".custom-dropdown-main").text($(this).text());
  $(".custom-dropdown-main").prepend('<span class="label">Budget</span>');
  $(".custom-dropdown").hide();      
});

.create-new-budget-value-date {
    margin: 30px 0 10px;
    padding: 10px 0;
    border-top: 1px solid #d8d9dc;
    position: relative;
}

.create-new-budget-value-date:before {
    content: "";
    background: url(../images/up-arrow.png) no-repeat 0 0;
    position: absolute;
    top: -14px;
    left: 100px;
    width: 22px;
    height: 14px;
}

.new-budget-value-select {
    width: 250px;
    border: 1px solid #d8d9dc;
    border-radius: 5px;
    padding: 2px 10px;
    min-height: 45px;
}

.new-budget-value-select .custom-dropdown-main {
    display: block;
    text-decoration: none;
    margin-top: 10px
}

.new-budget-value-select .custom-dropdown-main .glyphicon-menu-down {
    float: right;
}

.new-budget-value-select .custom-dropdown {
    margin-top: 5px;
}

.new-budget-value-select .custom-dropdown .dropdown-item {
    display: block;
    padding: 3px 2px;
}

.new-budget-value-select a:hover {
    text-decoration: none;
}

.new-budget-value-select .custom-dropdown .dropdown-item:hover {
    background: #e6e6e6;
    color: #000;
}

.label {
    display: block;
    font-size: 12px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="new-budget-value-select">
   <a class="custom-dropdown-main" href="#" id="custom-select">
   Budget <span class="glyphicon glyphicon-menu-down"></span></a>
   <div class="custom-dropdown" style="display: none;">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
   </div>
</div>