Javascript 下拉框与进度条混合
我对这段代码有问题，不知道是否有人能帮忙 这样做的目的是，当我点击下拉框并点击其中一个选项时，它会将进度条移动一定的量（每个不同的选项移动不同的量） 此外，我还放置了两个我需要的下拉框。真正的最终目标是，当我单击第一个下拉框中的一个选项时，它会移动进度条；当我单击第二个框中的另一个选项时，它会添加到进度条，或者从进度条中减去，具体取决于您选择的选项和该选项的值 干杯Javascript 下拉框与进度条混合,javascript,html,css,Javascript,Html,Css,我对这段代码有问题，不知道是否有人能帮忙 这样做的目的是，当我点击下拉框并点击其中一个选项时，它会将进度条移动一定的量（每个不同的选项移动不同的量） 此外，我还放置了两个我需要的下拉框。真正的最终目标是，当我单击第一个下拉框中的一个选项时，它会移动进度条；当我单击第二个框中的另一个选项时，它会添加到进度条，或者从进度条中减去，具体取决于您选择的选项和该选项的值 干杯 W3.CSS 动态进度条 函数changeFunc（$i）{ var elem=document.getElementByI
W3.CSS
动态进度条
函数changeFunc（$i）{
var elem=document.getElementById（“myBar”）；
var宽度=0；
var id=设置间隔（第10帧）；
函数框架（）{
如果（宽度>=12.5）{
清除间隔（id）；
}否则{
宽度++；
elem.style.width=宽度+'%'；
}
}
}
选择一个实现
未实施
在某些系统上实现
在所有系统上实施
在所有系统上实施并自动化
选择一个实现
未实施
在某些系统上实现
在所有系统上实施
在所有系统上实施并自动化
@{
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>
@{
布局=空；
}
索引501
.w3浅灰色{
颜色：浅灰色；
边界：5px；
}
.w3绿色{
颜色：绿色；
边界：5px；
}
.矩形框{
位置：相对位置；
宽度：0%；
溢出：隐藏；
背景色：#4679BD；
}
//我将jquery与javascript混合使用，因此您应该参考jquery
//我正在将状态栏连接到第一个下拉列表
//确保将ID放在第一个下拉列表中
//去掉ddl中的onchange
$（函数（）{
var firstIterationWidthVal=0；
函数changeFunc（最大宽度）{
var elem=document.getElementById（“myBar”）；
var宽度=0；
var id=设置间隔（帧（最大宽度），10）；
功能框（最大宽度）{
如果（firstIterationWidthVal==0）{
firstIterationWidthVal=maxWidth；
}
如果（宽度>=firstIterationWidthVal）{
清除间隔（id）；
}否则{
firstIterationWidthVal++；
elem.style.width=firstIterationWidthVal+'%'；
}
}
}
$（“#firstQOne”）。更改（函数（）{
开关（$（“#firstQOne选项：选中”）.text（）{
案例“未执行”：
changeFunc（4）；
firstIterationWidthVal=0；
打破
案例“在某些系统上实施”：
案例“在所有系统上实施”：
案例“在所有系统上实施并自动化”：
changeFunc（12.5）；
firstIterationWidthVal=0；
打破
}
})
})
动态进度条
选择一个实现
未实施
在某些系统上实现
在所有系统上实施
在所有系统上实施并自动化
@*
选择一个实现
未实施
在某些系统上实现
在所有系统上实施
在所有系统上实施并自动化
*@
$("#firstQOne").change(function () {
//add another switch to capture user event for changing ddl two
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":
//added
//put id = "secondOne" in the second ddl
//try putting a switch in a switch, or add more if statements
//REMOVE onchange="changeFunc(value);" from second ddl
if ($("#secondOne option:selected").text() == "Implemented on All Systems")
{
changeFunc(12.5 + 12.5);
}
else {
changeFunc(12.5);
}
firstIterationWidthVal = 0;
break;
}
})
因此，我不确定这是否是正确的方法，但现在它来了
$("#firstQTwo").change(function () {
//add another switch to capture user event for changing ddl two
switch ($("#firstQTwo option:selected").text()) {
case "Select an Implementation" :
changeFunc(0);
firstIterationWidthVal = 0;
break;
case "Not Implemented":
changeFunc(0);
firstIterationWidthVal = 0;
break;
case "Implemented on Some Systems":
changeFunc(4);
firstIterationWidthVal = 0;
break;
case "Implemented on All Systems":
changeFunc(8);
firstIterationWidthVal = 0;
break;
case "Implemented and Automated on All Systems":
changeFunc(12.5);
firstIterationWidthVal = 0;
break;
//added
//put id = "secondOne" in the second ddl
//try putting a switch in a switch, or add more if statements
//REMOVE onchange="changeFunc(value);" from second ddl
if ($("#firstQTwo option:selected").text() ==
"Implemented and Automated on All Systems")
{
changeFunc(12.5 + 12.5);
}
if ($("#firstQTwo option:selected").text() ==
"Implemented on Some Systems")
{
changeFunc(12.5 + 4);
}
if ($("#firstQTwo option:selected").text() ==
"Implemented on All Systems")
{
changeFunc(12.5 + 8);
}
else {
changeFunc(12.5);
}
firstIterationWidthVal = 0;
break;
}
})
})
})
</script>
$（“#firstQTwo”）.change（函数（）{
//添加另一个开关以捕获更改ddl 2的用户事件
开关（$（“#firstQTwo选项：选中”）.text（）{
案例“选择实现”：
changeFunc（0）；
firstIterationWidthVal=0；
打破
案例“未执行”：
changeFunc（0）；
firstIterationWidthVal=0；
打破
案例“在某些系统上实施”：
changeFunc（4）；
firstIterationWidthVal=0；
打破
案例“在所有系统上实施”：
changeFunc（8）；
firstIterationWidthVal=0；
打破
案例“在所有系统上实施并自动化”：
changeFunc（12.5）；
firstIterationWidthVal=0；
打破
//增加
//将id=“secondOne”放入第二个ddl中
//尝试将开关放入开关中，或添加更多if语句
//从第二个ddl中删除onchange=“changeFunc（value）；”
如果（$（“#firstQTwo选项：选中”）.text（）=
“在所有系统上实施并自动化”）
{
changeFunc（12.5+12.5）；
@{
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 () {
for (i = 0; i < 32; i++) {
var toAdd =
"<div id='criticalSecurityControlForms'>" +
"<form action='/action_page.php'>" +
"<select id='" + i + "QSelect' name='" + i + "QSelect' class='whiteselected'>" +
"<option class='NoValue' selected='selected' value='0'>Select an Implementation</option>" +
"<option class='Not' value='4'>Not Implemented</option>" +
"<option class='ImplementedOnSome' value='4'>Implemented on Some Systems</option>" +
"<option class='All' value='12.5'>Implemented on All Systems</option>" +
"<option class='AllAndAuto' value='12.5'>Implemented and Automated on All Systems</option>" +
"</select>" +
"</form>" +
"</div>"
$("#dynamicAddSelect").append(toAdd);
}
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 + '%';
}
}
}
$(".whiteselected").change(function () {
var $this = $(this);
//alert($this.attr("id")); this is how to get the id
if ($this.val() == 0) {
firstIterationWidthVal = 0;
}
changeFunc($this.val());
})
})
//The following is how you can get the previous value of a dropdown list, taken from another project
//var previousTokenAmount;
//$("#payamtDDL").on('focus', function () {
// previousTokenAmount = $("#payamtDDL").val();
//})
//$("#payamtDDL").change(function () {
// var Data = {
// ANumber: $("#ANumberId").val(),
// Pay: $("#payamtDDL").val()
// }
// $.ajax({
// url: '/Ajax/AjaxIntoServer',
// type: 'POST',
// data: Data,
// dataType: 'json',
// success: function (result) {
// if (result.IsDataTrue) {
// if (!confirm("Ok or Cancel")) {
// $("#payamtDDL").val(previousTokenAmount);
// }
// }
// },
// error: function (data, status, error) {
// //alert("error");
// }
// });
//})
</script>
</head>
<body>
<div class="progressbar">
<h2></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="dynamicAddSelect" />
</body>
</html>