Dynamic Progress Bar For Drop-Down Lists

Question

I would like my page to display a progress bar that fills up as the user selects options on drop-down lists. So far I've been able to set variables to contain the value of the drop-down, and functions that alter the bar's value, but nothing that works together. Here's one of the drop-downs:

<select id="optionA">
    <option value=" " disabled selected>Choose One...</option>
    <option value="mike">Mike</option>
    <option value="ryce">Andrew</option>
    <option value="michael">Michael</option>
    <option value="dannyl">Danny</option>
    <option value="cozz">Cozz</option>
    <option value="drew">Andrew</option>
    <option value="pete">Pete</option>
    <option value="sean">Sean</option>
    <option value="dom">Dom</option>
    <option value="marc">Marc</option>
    <option value="lou">Lou</option>
    <option value="rob">Rob</option>
    </select>

For now there are two identical drop-downs, so it's id="optionA" and id="optionB". And here's the script I've tried:

var optAVal; 
var optBVal; 

$('#optA').on('change', function() {
    var optAVal = this.value;  
}); 

$('#optB').on('change', function() {
    var optBVal = this.value;
}); 

if (optAVal == " " && optBVal == " ") {
    $("#progressBar").attr('value','0')
;} 

if (optAVal !== " " || optBVal !== " ") {
    $("#progressBar").attr('value','50');
}

if (optAVal !-- " " && optBVal !== " ") {
    $("#progressBar").attr('value','100');
}

You can see the idea is that if neither have selections, the bar reads 0, if one or the other are selected, it reads 50, and if both are selected it reads 100, problem is nothing's working properly. I've tried a few different combinations, including nesting the if statements in $('#optX').on('change', function() {}); and this current combination sets the progress bar to 100% on load. Appreciate the help in advance. Thanks!!!

Answer 1

The essential problem, in addition to small errors and typos, is that your conditionals are never called after the initial load. Thus the progress bar never gets updated.

If you use html like this:

<select id="optionA">
    <option value=" " disabled selected>Choose One...</option>
    <option value="mike">Mike</option>
    ...
</select>
<select id="optionB">
    <option value=" " disabled selected>Choose One...</option>=
    <option value="rob">Rob</option>
    ...
</select>
<progress id='progressBar' max='100' value='0'></progress>

And JQuery like this:

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

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

The result should be as you desire. Here's a working JSFiddle to verify: http://jsfiddle.net/wLt4z/2/

---

Edit 1: If you want to be more clever, you could assign each form option a shared class, like class='formOption', and craft a generic bit of JQuery to update the progress bar appropriately. For example:

$('.formOption').data("done", false);
$('.formOption').on('change', function() {
    if (!$(this).data("done")) {
        $("#progressBar").attr('value', $("#progressBar").prop('value')+100/$('.formOption').length);
    $(this).data("done", true);
    }
});

---

Edit 2: Updated to ensure altering a value doesn't increased the completion percentage. In both cases, this is done by means of a simple boolean flag, which in fact supersedes checking the value.