Сравнение двух значений элементов выбора

Я пытался найти фрагмент кода javascript, который сравнивает значения, выбранные пользователем в форме html, из двух тегов <select>. Поэтому, если пользователь выбирает минимальное значение, которое больше максимального числа, должно отображаться окно предупреждения в javascript.Сравнение двух значений элементов выбора

Например, если пользователь выбирает 5 спален из раскрывающегося списка MINIMUM bedroom, а затем 3 спальни из выпадающего списка MAXIMUM bedrooms, это не должно позволять обрабатывать форму при нажатии кнопки отправки. Но отлично, когда 3 выбирается из выпадающего списка MINIMUM и 5 из выпадающего списка MAXIMUM.

<form name="search" action="page3.php" method="GET"> 
    <select name="minimumBeds"> 
     <option value="1"> 1 </option> 
     <option value="2"> 2 </option> 
     <option value="3"> 3 </option> 
     <option value="4"> 4 </option> 
     <option value="5"> 5 </option> 
    </select> 


    <select name="maximumBeds"> 
     <option value="1"> 1 </option> 
     <option value="2"> 2 </option> 
     <option value="3"> 3 </option> 
     <option value="4"> 4 </option> 
     <option value="5"> 5 </option> 
    </select> 
</form>

источник

2012-03-24 user1135192

[Предупреждающие поля] (http://en.wikipedia.org/wiki/Alert_dialog_box#Criticism) ужасны с точки юзабилити. Лучше выделить входы и поместить сообщение на страницу. Распакованные валидаторы (такие как [jQuery Validation] (http://bassistance.de/jquery-plugins/jquery-plugin-validation/)) делают это легко достижимым. Вы также можете использовать JS, чтобы сделать невозможным выбор недопустимых параметров, отключив их, хотя это также создает проблемы удобства использования. – outis

Чтобы упростить это, давайте предположим, что эти <select> s имеют id

if (parseInt(document.getElementById('min').value, 10) > 
    parseInt(document.getElementById('max').value, 10)) 
{ 
    alert('ERRROR'); 
}

LIVE DEMO

источник

2012-03-24 23:21:30 gdoron

hi @gdoron следует помещать это внутри '

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

var minB = document.getElementById('min'), 
    maxB = document.getElementById('max'), 
    min, max; 

function setLimits(elem, other) { 
    var opts = other.getElementsByTagName('option'); 
    if (elem.id == 'min') { 
     for (var i = 0; i < elem.selectedIndex; i++) { 
      opts[i].disabled = 'disabled'; 
     } 
    } 
    else if (elem.id == 'max') { 
     for (var i = opts.length-1; i>elem.selectedIndex; i--) { 
      opts[i].disabled = 'disabled'; 
     } 
    } 
} 

minB.onchange = function() { 
    setLimits(minB, maxB); 
}; 
maxB.onchange = function() { 
    setLimits(maxB, minB); 
};

JS Fiddle demo.

Это предполагает, что элементы option будут идентичны между двумя элементами select. Эффективно это мешает кому-то выбрать максимальное количество спален, которое меньше их минимума (и наоборот).

Под редакцией Кодекса, чтобы учесть изменения в выборе для повторного включения опции, используя if/else блок:

var minB = document.getElementById('min'), 
    maxB = document.getElementById('max'); 

function setLimits(limit, opts, lower, upper) { 
    for (var i = 0; i < limit; ++i) { 
     opts[i].disabled = lower; 
    } 
    for (var i = limit; i < opts.length; ++i) { 
     opts[i].disabled = upper; 
    } 
} 

function setLowerLimit(limit, elem) { 
    var opts = elem.getElementsByTagName('option'); 
    setLimits(limit, opts, 'disabled', false); 
} 

function setUpperLimit(limit, elem) { 
    var opts = elem.getElementsByTagName('option'); 
    setLimits(limit+1, opts, false, 'disabled'); 
} 

/* Traditional event registration used to illustrate the above only. 
Production code should use a more modern method (addEventListener/attachEvent, 
wrapped in a convenience function to make it work across browsers). 
*/ 
minB.onchange = function() { 
    setLowerLimit(minB.selectedIndex, maxB); 
}; 
maxB.onchange = function() { 
    setUpperLimit(maxB.selectedIndex, minB); 
};

JS Fiddle demo.

Ссылки:

источник

2012-03-25 00:24:03

+1 для ссылок – Jashwant

Смежные вопросы

Сравнение двух значений элементов выбора

ответ

Смежные вопросы