Question

问题背景：

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

问题：

如果用户选择最小下拉列表中的值，即 4 ，该值大于最大值下拉列表中的值，请设为 3 ，因为我想显示弹出对话框给用户通知他们不能这样做，然后停止选中最小下拉列表中的点击项目。

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

.disable

但我确实不想“灰白”＆＃39;任何选项每次只验证点击的项目，然后停止选择该项目。

这可能吗？我们将不胜感激。

Answer 1

您可以使用选择菜单上的“更改”事件来检查值，然后决定如何处理此事。

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

“myfct”是测试值的函数。

Answer 2

像这样？

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..
}

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

Answer 3

我会通过手动处理下拉菜单来以编程方式解决此问题。例如：

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

Answer 4

你可以这样做：

JS Fiddle

＆＃13;

// 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('');
  }
}

＆＃13;

select{width:50px;}

＆＃13;

<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>

＆＃13;

如何阻止用户选择DropDown选项而不禁用＆＃39;它？

4 个答案: