比較兩個選擇元素的值

我一直在試圖尋找一段JavaScript代碼來比較用戶以兩種<select>標記的html格式選擇的值。因此，如果用戶選擇的最小值大於最大值，則應顯示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>

來源

2012-03-24 user1135192

[警示框]（http://en.wikipedia.org/wiki/Alert_dialog_box#Criticism）從可用性立場上來說很糟糕。最好突出輸入內容並將該消息放在頁面中。預先包裝的驗證器（例如[jQuery驗證]（http://bassistance.de/jquery-plugins/jquery-plugin-validation/））使得這很容易實現。您也可以使用JS來禁用它們來選擇無效選項，儘管這也會造成可用性問題。 – outis 2012-03-25 01:26:59

爲了簡化計算，假設這些<select>活動的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 2012-03-25 19:30:00

相關問題

比較兩個選擇元素的值

回答

相關問題