我在处理这段代码时遇到了问题，想知道是否有人可以提供帮助!
目标是当我单击下拉框并单击其中一个选项时，它会将进度条移动一定量(每个不同的选项移动不同的量)。
另外，我放了两个我需要的下拉框。真正的最终目标是做到这一点，当我点击第一个下拉框中的一个选项时，它会移动进度条，当我点击第二个框中的另一个选项时，它会添加到进度条或从中减去进度条取决于您选择的选项和该选项的值。
干杯!
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="progressbar">
<h2>Dynamic Progress Bar</h2>
<div class="w3-light-grey">
<div id="myBar" class="w3-green" style="height:24px;width:0"></div>
</div>
<br>
</div>
<script>
function changeFunc($i) {
var elem = document.getElementById("myBar");
var width = 0;
var id = setInterval(frame, 10);
function frame() {
if (width >= 12.5) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
}
}
}
</script>
<body>
<div id="criticalSecurityControlForms">
<form action="/action_page.php">
<select name="firstQ" onchange="changeFunc(value);" class="whiteselected">
<option class="whiteselected" selected="selected">Select an Implementation</option>
<option class="Not" value="0">Not Implemented</option>
<option class="ImplementedOnSome" value="4">Implemented on Some Systems</option>
<option class="All" value="8">Implemented on All Systems</option>
<option class="AllAndAuto" value="12.5">Implemented and Automated on All Systems</option>
</select>
</form>
</div>
<div id="criticalSecurityControlForms">
<form action="/action_page.php">
<select name="firstQ" onchange="changeFunc(value);" class="whiteselected">
<option class="whiteselected" selected="selected">Select an Implementation</option>
<option class="Not" value="0">Not Implemented</option>
<option class="ImplementedOnSome" value="4">Implemented on Some Systems</option>
<option class="All" value="8">Implemented on All Systems</option>
<option class="AllAndAuto" value="12.5">Implemented and Automated on All Systems</option>
</select>
</form>
</div>
</body>
</html>最佳答案
这就是答案。我已经编辑了我的答案，并会在我编辑的答案得到更正后立即删除此答案。修改后的答案还没有生效，因为我修改的时候是匿名登录的。
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index501</title>
<style type="text/css">
.w3-light-grey {
color: lightgray;
border: 5px;
}
.w3-green {
color: green;
border: 5px;
}
.rectangle-box {
position: relative;
width: 0%;
overflow: hidden;
background-color: #4679BD;
}
</style>
<script src="~/Scripts/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
//I'm mixing jquery with javascript, so you should reference jquery
//I am wiring up status bar to first dropdown
//BE SURE to put ID in first dropdown
//Take out the onchange in ddl
$(function () {
var firstIterationWidthVal = 0;
function changeFunc(maxWidth) {
var elem = document.getElementById("myBar");
var width = 0;
var id = setInterval(frame(maxWidth), 10);
function frame(maxWidth) {
if (firstIterationWidthVal == 0) {
firstIterationWidthVal = maxWidth;
}
if (width >= firstIterationWidthVal) {
clearInterval(id);
} else {
firstIterationWidthVal++;
elem.style.width = firstIterationWidthVal + '%';
}
}
}
$("#firstQOne").change(function () {
switch ($("#firstQOne option:selected").text()) {
case "Not Implemented":
changeFunc(4);
firstIterationWidthVal = 0;
break;
case "Implemented on Some Systems":
case "Implemented on All Systems":
case "Implemented and Automated on All Systems":
changeFunc(12.5);
firstIterationWidthVal = 0;
break;
}
})
})
</script>
</head>
<body>
<div class="progressbar">
<h2>Dynamic Progress Bar</h2>
<div class="w3-light-grey">
<div id="myBar" class="w3-green rectangle-box" style="height:24px;width:0%"></div>
</div>
<br>
</div>
<div id="criticalSecurityControlForms">
<form action="/action_page.php">
<select id="firstQOne" name="firstQ" class="whiteselected">
<option class="whiteselected" selected="selected">Select an Implementation</option>
<option class="Not" value="0">Not Implemented</option>
<option class="ImplementedOnSome" value="4">Implemented on Some Systems</option>
<option class="All" value="8">Implemented on All Systems</option>
<option class="AllAndAuto" value="12.5">Implemented and Automated on All Systems</option>
</select>
</form>
</div>
@*<div id="criticalSecurityControlFormsTwo">
<form action="/action_page.php">
<select name="firstQ" onchange="changeFunc(value);" class="whiteselected">
<option class="whiteselected" selected="selected">Select an Implementation</option>
<option class="Not" value="0">Not Implemented</option>
<option class="ImplementedOnSome" value="4">Implemented on Some Systems</option>
<option class="All" value="8">Implemented on All Systems</option>
<option class="AllAndAuto" value="12.5">Implemented and Automated on All Systems</option>
</select>
</form>
</div>*@
</body>
</html>
关于javascript - 混合进度条的下拉框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43906015/