需要帮助修改自定义下拉列表并更改其值

Question

我创建了一个自定义下拉列表，如下所示：在此处输入图像描述

现在点击列出的选项，主值应该改变，标签应该浮在上面

在此处输入图像描述

$(".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>