我一直在努力寻找一段javascript代码,用于比较用户在html表单中从两个<select>
标签中选择的值。因此,如果用户选择的最小值大于最大值,则应显示javascript中的警告框。
例如,如果用户从MINIMUM卧室下拉列表中选择5个卧室,然后从MAXIMUM卧室下拉列表中选择3个卧室,则不应允许在单击提交按钮时处理表单。但是从MINIMUM下拉列表中选择3并从MAXIMUM下拉列表中选择5时,这很好。
<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>
答案 0 :(得分:2)
为了简化它,我们假设那些<select
&gt;有id
if (parseInt(document.getElementById('min').value, 10) >
parseInt(document.getElementById('max').value, 10))
{
alert('ERRROR');
}
答案 1 :(得分:2)
您可以通过以下方式实现最终结果,但我正在尝试防止发生错误的可能性,而不是在事后发出警报:
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);
};
这假设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);
};
参考文献: