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 =＆＃34; optionA＆＃34;和id =＆＃34; optionB＆＃34;。这是我尝试过的脚本：

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语句嵌套在$（＆＃39;＃optX＆＃39;）中（＆＃39; change＆＃39;，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：已更新，以确保更改值并未提高完成百分比。在这两种情况下，这都是通过一个简单的布尔标志来完成的，它实际上取代了检查值。

下拉列表的动态进度条

1 个答案: