Question

我有一个select字段，其中包含一些禁用的option元素。使用jQuery，我想在选择option之前或之后找到任何禁用的元素。但是，当我从列表的开头或结尾选择option时，它们在之后或之前没有任何禁用的元素，结果我仍然收到来自脚本应找到两种可能性的消息。

HTML

<select>
  <option selected>-- select hour --</option>
  <option data-hour="1630" value="16:30">16:30</option>
  <option data-hour="1700" value="17:00">17:00</option>
  <option data-hour="1730" value="17:30" disabled>17:30</option>
  <option data-hour="1800" value="18:00" disabled>18:00</option>
  <option data-hour="1830" value="18:30" disabled>18:30</option>
  <option data-hour="1900" value="19:00">19:00</option>
  <option data-hour="1930" value="19:30" disabled>19:30</option>
  <option data-hour="2000" value="20:00" disabled>20:00</option>
  <option data-hour="2030" value="20:30">20:30</option>
  <option data-hour="2100" value="21:00">21:00</option>
</select>

<div id="result"></div>

jQUery

$('select').on('change', function() {

  var t = $(":selected", this);
  var thisSelected = $(":selected", this).data("hour");
  var result = $("#result");

  if ( t.prevUntil('option[disabled]') && !t.nextUntil('option[disabled]') ) {

    result.html(thisSelected + " HAVE PREV - NO NEXT " + t.prevUntil("option[disabled]").data("hour"));

  } else if ( !t.prevUntil('option[disabled]') && t.nextUntil('option[disabled]') ) {

    result.html(thisSelected + " HAVE NEXT - NO PREV " + t.nextUntil("option[disabled]").data("hour"));

  } else if ( t.nextUntil('option[disabled]') && t.prevUntil('option[disabled]') ) {

    result.html(thisSelected + " HAVE BOTH : " + t.prevUntil('option[disabled]').data('hour') + " || " + t.nextUntil('option[disabled]').data('hour') );

  }

});

JsFiddle

https://jsfiddle.net/zbfu1wkh/

Answer 1

无需使用nextUntil()或prevUntil()，只需使用prev()和next()并选中length然后获得data-hour
也可以使用[disabled]

.prevAll()

$('select').on('change', function() {

  var t = $(":selected", this);
  var thisSelected = $(":selected", this).data("hour");
  var result = $("#result");
  var If_prev = t.prev('option[disabled]'); // previous disabled option
  var If_next = t.next('option[disabled]'); // next disabled option
  if(If_prev.length){ // if there is one disabled prev
    console.log('Prev data-hour '+If_prev.data("hour")); // get data-hour of prev
  }else{ // if there is no direct prev
    if(t.prevAll('option[disabled]').length){ // check for any prev
      console.log('No direct prev but Last disabled prev is '+t.prevAll('option[disabled]').data('hour')); // get the last disabled prev
    }
  }
  if(If_next.length){ // if there is one disabled after
    console.log('Next data-hour '+If_next.data("hour")); // get data-hour of next
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
  <option selected>-- select hour --</option>
  <option data-hour="1630" value="16:30">16:30</option>
  <option data-hour="1700" value="17:00">17:00</option>
  <option data-hour="1730" value="17:30" disabled>17:30</option>
  <option data-hour="1800" value="18:00" disabled>18:00</option>
  <option data-hour="1830" value="18:30" disabled>18:30</option>
  <option data-hour="1900" value="19:00">19:00</option>
  <option data-hour="1930" value="19:30" disabled>19:30</option>
  <option data-hour="2000" value="20:00" disabled>20:00</option>
  <option data-hour="2030" value="20:30">20:30</option>
  <option data-hour="2100" value="21:00">21:00</option>

</select>

<div id="result"></div>

jQuery-检查之前或之后是否存在禁用的元素

1 个答案: