Динамический индикатор выполнения для выпадающих списков

0

Я хочу, чтобы моя страница отображала индикатор выполнения, который заполняется, когда пользователь выбирает параметры в раскрывающихся списках. До сих пор мне удалось установить переменные, содержащие значение раскрывающегося списка, и функции, которые изменяют значение столбца, но ничего не работают вместе. Здесь один из раскрывающихся списков:

<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% при загрузке. Оцените помощь заранее. Благодарю!!!

  • 0
    где находится optA и progressBar?
  • 0
    у вас есть optionA как id, но вы использовали optA
Показать ещё 1 комментарий
Теги:
dynamic
progress-bar
drop-down-menu

1 ответ

0
Лучший ответ

Существенной проблемой, помимо небольших ошибок и опечаток, является то, что ваши условные выражения никогда не вызываются после начальной загрузки. Таким образом, индикатор выполнения никогда не обновляется.

Если вы используете 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: обновлено, чтобы гарантировать, что изменение значения не увеличивает процент завершения. В обоих случаях это делается с помощью простого булевского флага, который фактически заменяет проверку значения.

Поделиться
  • 0
    Да! Успешно справился. Спасибо!!!
  • 0
    Майкл, еще раз спасибо за твой ответ. Я заметил одну небольшую проблему: я хочу, чтобы это происходило только один раз для каждого выпадающего списка. Идея была своего рода "ты выполнил первый шаг, а затем второй шаг, отлично!" Такие вещи. С вашим кодом, если вы откроете вверх или выпадаете и выбираете опцию, а затем снова открываете ее и выбираете новую опцию, панель продолжает заполняться. Есть ли что-то похожее на .on ('firstchange', ...) или что-то подобное? Спасибо!!
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню