如何阻止用户选择下拉列表选项而不“禁用”它

How to stop a user selecting a DropDown option without 'disabling' it?

本文关键字：禁用 选项 何阻止 用户 选择 下拉列表      更新时间：2023-09-26

问题背景：

我的应用程序中有两个dropdown菜单。一种是允许用户选择最小货币选择，另一种是最大货币选择。

问题：

如果用户在"最小值"下拉列表中

选择一个值，即 4 大于"最大值"下拉列表中选择的值，例如 3，那么我想向用户显示一个弹出对话框，通知他们他们无法执行此操作，然后停止选择最小下拉列表中单击的项目。

我可以看到很多使用的例子：

.disable

但我不想"灰显"任何选项，只是每次验证单击的项目，然后停止选择该项目。

这可能吗？任何帮助将不胜感激。

您可以使用选择菜单上的"change"事件来检查值，然后决定如何处理该值。

document.getElementById('your_dropdown_id').addEventListener('change', myfct);

其中"myfct"是测试值的函数。

像这样吗？

var validate = true;
if ( FirstSelectedValue > SecondSelectedValue ){
alert('first selected value must be higher or equal to second value');
validate = false;
}
/

/无论您将信息传递到何处..

if (validate && your other options..){
//continue, first value is lower or equal to second value..
}

更好的选择是仅在选择第一个值时填充第二个值，并且只允许有效选项。

我会通过手动处理下拉列表上的单击来编程解决此问题。例如：

$('.dropdown-min').on('click', function(e) {
 e.preventDefault();
 if($(e.target).val() < $('.dropdown-max').find(":selected").val()) {
  $(e.target).attr('selected', 'selected');
 }
});

你可以这样做：

JS小提琴 

// grab the two dropdowns with their classname on change event
$('.min-max').on('change', function() {
  var $th = $(this),
    id = $th.attr('id');
  // pass the id and the value to the function
  updateMinMax(id, parseInt($th.val()));
})
function updateMinMax(id, v) {
  // determine the id of the other dropdown
  var otherID = (id == 'minimum') ? 'maximum' : 'minimum',
    thisDropdown = $('#' + id),
    otherDropdown = $('#' + otherID);
  // we need to make sure the other dropdown value is set so we need
  // to add this condition otherDropdown.val() != ''
  if (id == 'minimum' && otherDropdown.val() != '' && thisDropdown.val() > otherDropdown.val()) {
    // if a selected value from minimum dropdown is MORE than
    // the selected maximum value
    alert('minimum cannot be greater than maximum');
    // reset current dropdown selection
    thisDropdown.val('');
  } else if (id == 'maximum' && otherDropdown.val() != '' && thisDropdown.val() < otherDropdown.val()) {
    // if a selected value from maximum dropdown is LESS than
    // the selected minimum value
    alert('maximum cannot be less than minimum');
    thisDropdown.val('');
  }
}
select{width:50px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Min:<select class="min-max" id="minimum">
  <option></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><option value="6">6</option><option value="7">7</option>
  <option value="8">8</option></select><hr>
Max:<select class="min-max" id="maximum">
  <option></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>
  <option value="6">6</option><option value="7">7</option><option value="8">8</option>
  <option value="9">9</option></select>

相关文章：