Question

我在使用这段代码时遇到了问题，并且想知道是否有人可以提供帮助！

目标是使其成为当我点击下拉框并单击其中一个选项时，它会将进度条移动一定量（为每个不同的选项移动不同的数量）。

另外，我放了两个我需要的下拉框。 REAL最终目标是当我点击第一个下拉框中的一个选项时它会移动进度条，当我点击第二个框中的另一个选项时，它会添加到进度条或从中减去进度条取决于您选择的选项以及该选项具有的值。

干杯！

<!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>

Answer 1

这就是答案。我已经编辑了我的答案，一旦我的编辑答案得到纠正，我就会删除这个答案。编辑后的答案尚未生效，因为当我进行编辑时，我以匿名身份登录。

@{
    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>

Answer 2

所以我不确定这是否是正确的方法，但在这里...... [/ p>

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

因为它就在这里它不起作用（显然）：）

Answer 3

很抱歉这么多答案。这篇文章应该对你有所帮助。

@{
    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>

Answer 4

好吧所以我放弃了下拉栏，因为我意识到它更难用，然后说一个无线电选项。这是我现在使用的代码作为测试，到目前为止唯一的问题是，如果我单击一个不同的按钮，它会添加到进度条的现有值。这很好，唯一的问题是如果我在同一个表单中单击一个不同的单选选项，它应该减去或添加到进度条。现在它不断添加它。

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <title>testinggg</title>
    <link rel="stylesheet" type="text/css" href="AuditScriptAssesmentToolTest.css">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 <script src="~/Scripts/jquery-1.12.4.min.js"></script>



</head>
<body>

<form action="">
  <input id="selectA" type="radio" name="gender" value="male"> Male<br>
  <input id="selectB" type="radio" name="gender" value="female"> Female<br>
  <input id="selectC" type="radio" name="gender" value="other"> Other
</form>

<br>

<form action="">
  <input id="selectD" type="radio" name="gender" value="male"> Male<br>
  <input id="selectE" type="radio" name="gender" value="female"> Female<br>
  <input id="selectF" type="radio" name="gender" value="other"> Other
</form>

<progress id='progressBar' max='100' value='0'></progress>

<script>

  var doneA = false;
$('#selectA').on('click', function() {
    if (!doneA) {
        $("#progressBar").attr('value', $("#progressBar").prop('value')+10);
        doneA = true;
    }
}); 

var doneB = false;
$('#selectB').on('click', function() {
    if (!doneB) {
        $("#progressBar").attr('value', $("#progressBar").prop('value')+20);
        doneB = true;
   } 
});

var doneC = false;
$('#selectC').on('click', function() {
    if (!doneC) {
        $("#progressBar").attr('value', $("#progressBar").prop('value')+30);
        doneC = true;
    }
});

  var doneD = false;
$('#selectD').on('click', function() {
    if (!doneD) {
        $("#progressBar").attr('value', $("#progressBar").prop('value')+5);
        doneD = true;
    }
}); 

var doneE = false;
$('#selectE').on('click', function() {
    if (!doneE) {
        $("#progressBar").attr('value', $("#progressBar").prop('value')+10);
        doneE = true;
   } 
});

var doneF = false;
$('#selectF').on('click', function() {
    if (!doneF) {
        $("#progressBar").attr('value', $("#progressBar").prop('value')+15);
        doneF = true;
    }
});
  </script>
</body>
</html>

＆＃13;

下拉框与进度条混合

4 个答案: