dropdown box and progress bar

Question

So I'm working on code, and I am trying to make it so when I click one of the names, it moves the progress bar a specific amount based on the options value.

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

Right now it moves 25% whenever you click a name (because thats what I have it set too). my question is instead of giving it a value of 25, can I give it the specific options value? For example option4 (which is Danny) has a value of 20, so the goal is to do this...

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

instead of:

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

score 2 · Accepted Answer · edited May 23 '17 at 12:34

You can retrieve the value of the selected option via jquery. However, I'm not so sure about your logic. Something like this would let the user change their answer and update the progress bar properly. Instead of adding a value to the progress bar when a select changes, it does a calculation of what the value should be everytime any select changes.

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 );

Fiddle here:

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

I also had to make a change to check for NaNs. I realized nothing was changing on the first select change, due to parseInt() returning NaN for non-values. Also, you don't want to use .attr to adjust the placeholder value: use .prop, just like you did to fetch the value. See this reference

Yeah I noticed all the other answers I am able to move the bar but after I click them, I can change the answer but It wont move the progress bar anymore....Would you mind putting your idea into a jfiddle? Would be greatly appreciated :) — Mitch, May 12 '17 at 18:43
Yup, this is it! Thank you so much!!! I have been working on this for 3 days straight lol. So if I have more than 2 dropdown boxes would I just add another if statement with opt 3? — Mitch, May 12 '17 at 19:00

score 0 · Answer 2 · answered May 12 '17 at 18:33

It is possible. Just capture the value of the option (convert it to an int first though).

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>

score 0 · Answer 3 · answered May 12 '17 at 18:34

You can use $(this).val() to find out the selected value.

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

dropdown box and progress bar

3 Answers3