下拉列表的动态进度条 [英] Dynamic Progress Bar For Drop-Down Lists

问题描述

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

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>

现在有两个相同的下拉菜单，所以它的id =optionA和id = optionB。这是我尝试过的脚本：

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

你可以看到这个想法是如果两者都没有选择，那么条形码为0 ，如果选择了一个或另一个，它将读取50，如果两者都被选中，则读取100，问题就是无法正常工作。我尝试了几种不同的组合，包括将if语句嵌套在$（'＃optX'）。on（'change'，function（）{}）;并且此当前组合将进度条设置为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!!!

推荐答案

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

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.

如果你使用这样的html：

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>

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

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

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

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

---

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

---

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.

这篇关于下拉列表的动态进度条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！