Question

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

Answer 1

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

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

LIVE DEMO

Answer 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

参考文献：

比较两个选择元素值

2 个答案: