我有两个下拉菜单。一个具有最小值,另一个具有最大值。
我正在尝试从最大下拉列表中禁用小于最小值的选项
<div>
<select id="min">
<option>Select min</option>
<option value=0>0</option>
<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 id="max">
<option>Select max</option>
<option value=2>2</option>
<option value=3>3</option>
<option value=4>4</option>
<option value=5>5</option>
<option value=6>6</option>
<option value=7>7</option>
</select>
</div>
最佳答案
仅供引用:如果您未设置value
元素的option
属性,则value
只是该option
的文本内容,因此在您的情况下,您无需在任何value
上设置options
。
内联查看其他注释:
let maxSelect = document.getElementById("max");
let minSelect = document.getElementById("min")
// When the first select's value is changed...
minSelect.addEventListener("change", function(){
// Loop through all the <option> elements in the second list
maxSelect.querySelectorAll("option").forEach(function(opt){
// Check the option value to see if it is more than the value
// of the first select. If so, disable it, otherwise enable it.
// The prepended + implicitly converts the string values to numbers
if(+minSelect.value > +opt.value){
opt.disabled = true;
} else {
opt.disabled = false;
}
});
});
<div>
<select id="min">
<option>Select min</option>
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<select id="max">
<option>Select max</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
</select>
</div>
关于javascript - jQuery/Javascript:比较两个下拉列表的最小值和最大值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62940999/