Question

我有2个下拉菜单。一个是最小尺寸，另一个是最大尺寸。我正在检查最小选择框中的选定值是否大于最大选择框的选定值，反之亦然。效果很好。

我被困在一个我希望将之前的值设置为＆＃39;选择＆＃39;如果验证返回false。它不允许我这样做。

演示在这里 - https://jsfiddle.net/squidraj/2fnxw609/1/

JS代码

 $("select[name=size-min],select[name=size-max]").focus(function() {
   // Store the current value on focus, before it changes
   previous = this.value;
 }).change(function() {

   var selname = $(this).attr('name');
   var selval = $(this).val();
   var e1 = document.getElementById("size-min");
   var minval = e1.options[e1.selectedIndex].value;
   var e2 = document.getElementById("size-max");
   var maxval = e2.options[e2.selectedIndex].value;

   alert(previous);

   if (selname == "size-min" && parseInt(minval) > parseInt(maxval) && maxval != "") {
     $('#size-min').val(previous);
     alert("The minimum size needs to be smaller than maximum size.");
     return false;
   }
   if (selname == "size-max" && parseInt(selval) < parseInt(minval)) {
     $('#size-max').val(previous);
     alert("The maximum size needs to be greater than minimum size.");
     return false;
   }

 });

我正在努力实现的目标是什么。任何帮助或建议都非常感谢。

Answer 1

不是真的答案：但是证明你的逻辑是合理的（并且可能更多地利用jQuery功能）

＆＃13;

function init() {
  var previous;
 $(".minmax").focus(function() {
   // Store the current value on focus, before it changes
   previous = this.value;
 }).change(function(e) {
   if (parseInt($("#size-max").val()) < parseInt($("#size-min").val())) {
     $(this).val(previous);
     console.log($(this).attr('id')=="size-min"?"The minimum size needs to be smaller than maximum size.":"The maximum size needs to be greater than minimum size.");
   }
   previous = this.value; // Chrome calls "change" every time the value changes.  Firefox only calls it when the element loses focus.  This change makes chromes behavior a little more intuitive
 });
}
$(init);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<form>
<select class="minmax" id="size-min">
  <option selected>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>
<select class="minmax" id="size-max">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option selected>5</option>
</select>
</form>
</body>

＆＃13;

Answer 2

似乎在Firefox .focus()处，如果输入已经被聚焦，则不会触发 - 例如，当您在同一个组合框中更正我们的选项时 - previous赢了但不会因为它已经成为焦点。

当.focus()事件替换为.click()时，您的代码应该有用。

因此，在选择新选项之前，无论该特定组合框是否已经聚焦，前一个选项都会始终保存。

如果返回false，则在下拉列表中设置先前选择的值

2 个答案: