比较两个选择元素值

时间:2012-03-24 23:19:05

标签: javascript html

我一直在努力寻找一段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>

2 个答案:

答案 0 :(得分:2)

为了简化它,我们假设那些<select&gt;有id

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

LIVE DEMO

答案 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);
};​

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

参考文献: