javascript - 如何显示在下拉列表顶部选择的值？
问题描述
所以我有 3 个下拉列表，从第一个中选择值后，其他 2 个出现：
function getElements(list) {
var checkList = document.getElementById(list);
var items = document.getElementById(list + '_items');
if (items.classList.contains('visible')) {
items.classList.remove('visible');
items.style.display = "none";
} else {
items.classList.add('visible');
items.style.display = "block";
}
};
$('html').click(function() {
$('#list2_items').hide();
});
$('#list2').click(function(event) {
event.stopPropagation();
$('#list6_items').hide();
});
$('html').click(function() {
$('#list6_items').hide();
});
$('#list6').click(function(event) {
event.stopPropagation();
$('#list2_items').hide();
});
$('html').click(function() {
$('#list3_items').hide();
});
$('#list3').click(function(event) {
event.stopPropagation();
$('#list7_items').hide();
});
$('html').click(function() {
$('#list7_items').hide();
});
$('#list7').click(function(event) {
event.stopPropagation();
$('#list3_items').hide();
});
$('html').click(function() {
$('#list4_items').hide();
});
$('#list4').click(function(event) {
event.stopPropagation();
$('#list2_items').hide();
});
$(document).ready(function(){
$("select").change(function(){
$(this).find("option:selected").each(function(){
var optionValue = $(this).attr("value");
if(optionValue){
$(".field-row").not("." + optionValue).hide();
$("." + optionValue).show();
} else{
$(".field-row").hide();
}
});
}).change();
});.dropdown-check-list {
display: inline-block;
width: 230px;
position: relative;
padding: 5px 10px 5px 10px;
margin-right: 5px;
justify-content: center;
box-sizing: border-box;
font-size: 16px;
margin-bottom: 15px;
width: 260px;
}
.dropdown-check-list .anchor {
position: relative;
cursor: pointer;
display: inline-block;
padding: 5px 50px 5px 10px;
border: 1px solid #000;
width: 230px;
justify-content: right;
background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='34' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
background-repeat: no-repeat ;
background-position-x: 100% ;
background-position-y: 5px;
}
.dropdown-check-list block{
box-sizing: border-box;
display: inline-block;
font-size: 16px;
padding: 10px;
margin-bottom: 15px;
width: 260px;
}
#criteria {
background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='34' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
background-repeat: no-repeat ;
background-position-x: 100% ;
background-position-y: 5px;
-moz-appearance: none;
/* for Chrome */
-webkit-appearance: none;
}
/*.dropdown-check-list .anchor:after {
position: absolute;
display: inline-block;
content: "";
border-left: 2px solid black;
border-top: 2px solid black;
padding: 5px;
right: 10px;
top: 20%;
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}*/
.dropdown-check-list .anchor:active:after {
right: 8px;
top: 21%;
}
.dropdown-check-list ul.items {
position: absolute;
padding: 2px;
display: none;
margin: 0;
border: 1px solid #ccc;
border-top: none;
z-index:99;
background-color: #ffffff;
width: 230px;
height: 150px;
overflow: auto;
}
.dropdown-check-list ul.items li {
list-style: none;
}
.dropdown-check-list.visible .anchor {
color: #0094ff;
}
.dropdown-check-list.visible .items {
display: block;
}<div class="field-rows" name="criteria_type" id="criteria_type" style="display: flex;">
<label class="form-label">Select Criteria</label>
<select class="form-dropdown field" name="criteria" id="criteria" style="width: 230px;" required="">
<option value="">Select Criteria</option>
<option value="quarterly">Quarter</option>
<option value="half_yearly">Month</option>
<option value="yearly">Year</option>
</select>
</div>
<div class="quarterly field-row" name="quarter criteria_type" id="quarterly criteria_type" style="display: flex;">
<label class="form-label" style="margin-top: 15px;">Select Quarter</label>
<div class="quarter dropdown-check-list field" style="display: flex; justify-content: right; margin-left: -10px;" id="kpi_type_quarter">
<div id="list2" class="block" tabindex="1" style="margin-right: 10px;">
<!-- <label class="form-label">Select Quarter</label> -->
<span class="anchor" onclick="getElements('list2')">Select Quarter</span>
<ul id="list2_items" class="items visible" style="display: none;">
<li><input type="checkbox" name="quarter" value="1" id="Q1"><label for="Q1">Apr - Jun (Quarter 1) </label></li>
<li><input type="checkbox" name="quarter" value="2" id="Q2"><label for="Q2">Jul - Sep (Quarter 2) </label></li>
<li><input type="checkbox" name="quarter" value="3" id="Q3"><label for="Q3">Oct - Dec (Quarter 3) </label></li>
<li><input type="checkbox" name="quarter" value="4" id="Q4"><label for="Q4">Jan - Mar (Quarter 4) </label></li>
</ul>
</div>
<div id="list6" class="block" tabindex="100">
<label class="form-label">Select Year</label>
<span class="anchor" onclick="getElements('list6')">Select Year</span>
<ul id="list6_items" class="items visible" style="display: block;">
<li><input type="checkbox" name="quarter_year" value="2021">2021-2022 </li>
</ul>
</div>
</div>
</div>
现在在列表 2 和列表 6 中，我想在顶部显示选定的值，类似于这个下拉图像。
我尝试了各种解决方案，它们都取值，因为它在数据库中使用，所以无法在我的下拉列表中更改，所以是否有取字符串值的解决方案，或者名称值也可以工作。谢谢你。