Javascript 比较两个选定元素的值

我一直在寻找一段javascript代码，它比较用户在html表单中从两个

标记中选择的值。因此，如果用户选择的最小值大于最大值，则应显示javascript中的警报框

例如，如果用户从“最小卧室”下拉列表中选择5间卧室，然后从“最大卧室”下拉列表中选择3间卧室，则在单击“提交”按钮时不允许处理表单。但如果从最小下拉列表中选择3，从最大下拉列表中选择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>

1.
2.
3.
4.
5.
1.
2.
3.
4.
5.

为了简化它，让我们假设那些

s具有
id

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

为了简化它，让我们假设那些
s具有
id

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

您可以通过以下方式实现最终结果，尽管我试图防止错误发生的可能性，而不是事后发出警报：

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


参考资料：







您可以通过以下方式实现最终结果，尽管我试图防止错误发生的可能性，而不是事后发出警报：

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


参考资料：







hi@gdoron我应该把它放在
标签的
中吗？我认为'min'和'max'是id，但是was 10是不是意味着？这是基数，它定义了要解析的int的基数。看。它似乎不起作用：我在
select
标记中给出了
id
。我是不是应该为ech
元素提供一个
id
？@user1135192。我添加了一个现场演示。抱歉这么粗鲁，但也许你应该学习
javascript
？您好@gdoron我应该把它放在
标记的
中吗？我认为'min'和'max'是id，但是was 10是不是意味着？这是基数，它定义了要解析的int的基数。看。它似乎不起作用：我在
select
标记中给出了
id
。我是不是应该为ech
元素提供一个
id
？@user1135192。我添加了一个现场演示。抱歉这么粗鲁，但也许你应该学习
javascript
？从可用性的角度来看，它们是可怕的。最好突出显示输入并将消息放在页面中。预先打包的验证器（例如）使这一点很容易实现。您还可以使用JS，通过禁用无效选项，使其无法选择，尽管这也会产生可用性问题。从可用性的角度来看，它们是可怕的。最好突出显示输入并将消息放在页面中。预先打包的验证器（例如）使这一点很容易实现。您还可以使用JS，通过禁用无效选项，使其无法选择，尽管这也会产生可用性问题。