下拉框和进度条

时间：2017-05-12 18:27:56

标签： javascript jquery html css

所以我正在处理代码，而我正在尝试这样做，当我点击其中一个名称时，它会根据选项值将进度条移动一个特定的数量。

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


<select id="selectA">
    <option value=" " disabled selected>Choose One...</option>
    <option id="option1" value="5">Mike</option>
    <option id="option2" value="10">Andrew</option>
    <option id="option3" value="15">Michael</option>
    <option id="option4" value="20">Danny</option>
    <option id="option5" value="25">Cozz</option>
    <option id="option6" value="30">Andrew</option>
    <option id="option7" value="35">Pete</option>
    <option id="option8" value="40">Sean</option>
    <option id="option9" value="45">Dom</option>
    <option id="option10" value="50">Marc</option>
    <option id="option11" value="0">Lou</option>
    <option id="option12" value="0">Rob</option>
</select>
<select id="selectB">
    <option value=" " disabled selected>Choose One...</option>
    <option id="option1" value="5">Mike</option>
    <option id="option2" value="10">Andrew</option>
    <option id="option3" value="15">Michael</option>
    <option id="option4" value="20">Danny</option>
    <option id="option5" value="25">Cozz</option>
    <option id="option6" value="30">Andrew</option>
    <option id="option7" value="35">Pete</option>
    <option id="option8" value="40">Sean</option>
    <option id="option9" value="45">Dom</option>
    <option id="option10" value="50">Marc</option>
    <option id="option11" value="0">Lou</option>
    <option id="option12" value="0">Rob</option>
</select>

<progress id='progressBar' max='100' value='0'></progress>

<script>
  //document.getElementById("selectA").selectedIndex;

  var doneA = false;
$('#selectA').on('change', function() {
    if (!doneA) {
        $("#progressBar").attr('value', $("#progressBar").prop('value')+25);
        doneA = true;
    }
}); 

var doneB = false;
$('#selectB').on('change', function() {
    if (!doneB) {
        $("#progressBar").attr('value', $("#progressBar").prop('value')+25);
        doneB = true;
    }
});
  </script>
</body>
</html>

现在，每当你点击一个名字时，它就会移动25％（因为这就是我所设置的内容）。我的问题不是给它一个25的值，我可以给它具体的选项价值吗？例如，option4（Danny）的值为20，所以目标是这样做...... 

$("#progressBar").attr('value', $("#progressBar").prop('value')+Option4);

而不是：

$("#progressBar").attr('value', $("#progressBar").prop('value')+ 25);

3 个答案:

答案 0 :(得分：2)

您可以通过jquery检索所选选项的值。但是，我对你的逻辑不太确定。这样的事情会让用户改变他们的答案并正确更新进度条。当选择更改时，它不会向进度条添加值，而是在每次选择更改时计算值应该是什么。

function update_progressbar() {
    var opt1 = parseInt( $('option:selected', $('#selectA')).val() );
    var opt2 = parseInt( $('option:selected', $('#selectB')).val() );

    var total = isNaN( opt1 ) ? 0 : opt1;
    if ( !isNaN( opt2 ) ) {
        total += opt2;
    }
    $("#progressBar").prop( 'value', total )
}

$('#selectA').on( 'change', update_progressbar );
$('#selectB').on( 'change', update_progressbar );

小提琴：

https://jsfiddle.net/nf6zojLt/2/

我还必须进行更改以检查NaN。由于parseInt（）为非值返回NaN，我意识到第一次选择更改没有任何变化。此外，您不希望使用.attr来调整占位符值：使用.prop，就像您获取值一样。见this reference

答案 1 :(得分：0)

有可能。只需捕获选项的值（尽管将其转换为int）。

var doneA = false;
$('#selectA').on('change', function() {
  if (!doneA) {
    var progressBarVal = parseInt($("#progressBar").val());
    var addVal = parseInt($(this).val());
    $("#progressBar").attr('value',  + addVal);
    doneA = true;
  }
});

var doneB = false;
$('#selectB').on('change', function() {
  if (!doneB) {
    var progressBarVal = parseInt($("#progressBar").val());
    var addVal = parseInt($(this).val());
    $("#progressBar").attr('value',  + addVal);
    doneB = true;
  }
});
<!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>


  <select id="selectA">
    <option value=" " disabled selected>Choose One...</option>
    <option id="option1" value="5">Mike</option>
    <option id="option2" value="10">Andrew</option>
    <option id="option3" value="15">Michael</option>
    <option id="option4" value="20">Danny</option>
    <option id="option5" value="25">Cozz</option>
    <option id="option6" value="30">Andrew</option>
    <option id="option7" value="35">Pete</option>
    <option id="option8" value="40">Sean</option>
    <option id="option9" value="45">Dom</option>
    <option id="option10" value="50">Marc</option>
    <option id="option11" value="0">Lou</option>
    <option id="option12" value="0">Rob</option>
</select>
  <select id="selectB">
    <option value=" " disabled selected>Choose One...</option>
    <option id="option1" value="5">Mike</option>
    <option id="option2" value="10">Andrew</option>
    <option id="option3" value="15">Michael</option>
    <option id="option4" value="20">Danny</option>
    <option id="option5" value="25">Cozz</option>
    <option id="option6" value="30">Andrew</option>
    <option id="option7" value="35">Pete</option>
    <option id="option8" value="40">Sean</option>
    <option id="option9" value="45">Dom</option>
    <option id="option10" value="50">Marc</option>
    <option id="option11" value="0">Lou</option>
    <option id="option12" value="0">Rob</option>
</select>

  <progress id='progressBar' max='100' value='0'></progress>

</body>

</html>

答案 2 :(得分：0)

您可以使用$（this）.val（）来查找所选值。

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


<select id="selectA">
    <option value=" " disabled selected>Choose One...</option>
    <option id="option1" value="5">Mike</option>
    <option id="option2" value="10">Andrew</option>
    <option id="option3" value="15">Michael</option>
    <option id="option4" value="20">Danny</option>
    <option id="option5" value="25">Cozz</option>
    <option id="option6" value="30">Andrew</option>
    <option id="option7" value="35">Pete</option>
    <option id="option8" value="40">Sean</option>
    <option id="option9" value="45">Dom</option>
    <option id="option10" value="50">Marc</option>
    <option id="option11" value="0">Lou</option>
    <option id="option12" value="0">Rob</option>
</select>
<select id="selectB">
    <option value=" " disabled selected>Choose One...</option>
    <option id="option1" value="5">Mike</option>
    <option id="option2" value="10">Andrew</option>
    <option id="option3" value="15">Michael</option>
    <option id="option4" value="20">Danny</option>
    <option id="option5" value="25">Cozz</option>
    <option id="option6" value="30">Andrew</option>
    <option id="option7" value="35">Pete</option>
    <option id="option8" value="40">Sean</option>
    <option id="option9" value="45">Dom</option>
    <option id="option10" value="50">Marc</option>
    <option id="option11" value="0">Lou</option>
    <option id="option12" value="0">Rob</option>
</select>

<progress id='progressBar' max='100' value='0'></progress>

<script>
  //document.getElementById("selectA").selectedIndex;

  var doneA = false;
$('#selectA').on('change', function() {
    if (!doneA) {
        $("#progressBar").attr('value', $("#progressBar").prop('value')+$(this).val());
        doneA = true;
    }
}); 

var doneB = false;
$('#selectB').on('change', function() {
    if (!doneB) {
        $("#progressBar").attr('value', $("#progressBar").prop('value')+$(this).val());
        doneB = true;
    }
});
  </script>
</body>
</html>

相关问题
最新问题