下拉列表的动态进度条

Question

我希望我的页面显示一个进度条，当用户在下拉列表中选择选项时该进度条会填满。到目前为止，我已经能够设置变量以包含下拉列表的值，以及改变条形值的函数，但没有任何东西可以一起工作。这是下拉列表之一：

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

目前有两个相同的下拉菜单，即 id="optionA" 和 id="optionB"。这是我尝试过的脚本：

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

您可以看到这个想法是，如果两者都没有选择，则条显示为 0，如果选择了其中一个，则显示为 50，如果两者都被选中，则显示为 100，问题是没有任何工作正常。我尝试了几种不同的组合，包括将 if 语句嵌套在 $('#optX').on('change', function() {});并且此当前组合将进度条设置为加载时的 100%。提前感谢帮助。谢谢！！！

Answer 1

除了小错误和拼写错误之外，基本问题是在初始加载后永远不会调用您的条件。因此进度条永远不会更新。

如果你像这样使用html：

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

JQuery 是这样的：

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

结果应该如你所愿。这是一个要验证的工作 JSFiddle：http://jsfiddle.net/wLt4z/2/

---

编辑 1： 如果您想更聪明一点，您可以为每个表单选项分配一个共享类，如 class='formOption'，并制作一个通用的 JQuery 来适当地更新进度条。例如：

$('.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);
    }
});

---

编辑 2： 更新以确保更改值不会增加完成百分比。在这两种情况下，这都是通过一个简单的布尔标志来完成的，它实际上取代了检查值。