javascript - 使用 jQuery 的类和值不为空的所有选择列表选项

Question

我有一个精选的时间列表。每个选择选项都可以有或没有类 class="timeSoldOut"。每个选择选项都将具有某种时间的值，除了列表中的第一项是默认的“选择时间”选项。

我想做的是查看是否所有实际时间列表项目都已售完，然后我将触发类似“所有时间已售完”的消息。

我的问题是，因为有一个选项(默认的“选择时间”)，它永远不会有“timeSoldOut”消息，我需要知道如何遍历所有选项以查看时间段是否具有时间值并且没有“timeSoldOut”类。我有一个 $.each() 循环设置只是循环遍历所有时间列表，看起来有点昂贵并且可能不需要它。我的主要目标是看看是否没有剩余时间并显示我的信息。 我遇到问题是因为对所有有值(value)的选项进行简单检查，类别已售罄，以及是否有任何有值(value)但未售罄的选项。
那有意义吗？ 我已经包括了我目前所拥有的，HTML 和 jQuery。

jQuery

  var productShowTimeListOption = $('#ShowTimeList option');
   var productTimeSlotSoldOut = $(".timeSoldOut");
  //If option has value and all timeslots are sold out, but the first one does not have a value which is "Choose a Time"
//Not sure if I need a loop at all. 
 productShowTimeListOption.each(function(){
    if($(this).val() != "" && $(this).hasClass("timeSoldOut")){
       console.log("productTimeList has sold out times.");  
    }
});

 //Need to know if all of the actual time lists are sold out and ignore the
 // "Choose a time" option in order to trigger message that all the times are sold out. 
  //THIS ONE IS NOT QUITE WORKING STILL GETTING NOT SOLD OUT.
  //if any of time time lists options have a time value but does not have the class of time slot sold out
if(productShowTimeListOption.val() != "" && !productShowTimeListOption.hasClass("museumTimeSlotSoldOut").length){
    console.log("time list not sold out");
}else{
    console.log("all times are sold out");
}

HTML

<select name="TimesSelect" id="ShowTimeList">
     <option value="">Choose a Time</option>
                <option value="208292" disabled="disabled" class="timeSoldOut">10:50 AM - SOLD OUT</option>
                <option value="208464" disabled="disabled" class="timeSoldOut">11:00 AM - SOLD OUT</option>
                <option value="208636" disabled="disabled" class="timeSoldOut">11:10 AM - SOLD OUT</option>
                <option value="208808" disabled="disabled" class="timeSoldOut">11:20 AM - SOLD OUT</option>
 </select

Answer 1

可能是这样的:

if(!$('#ShowTimeList option[value!=""]').not('.timeSoldOut').length){
	alert('Time is over');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<select name="TimesSelect" id="ShowTimeList">
     <option value="">Choose a Time</option>
     <option value="208292" disabled="disabled" class="timeSoldOut">10:50 AM - SOLD OUT</option>
     <option value="208464" disabled="disabled" class="timeSoldOut">11:00 AM - SOLD OUT</option>
     <option value="208636" disabled="disabled" class="timeSoldOut">11:10 AM - SOLD OUT</option>
     <option value="208808" disabled="disabled" class="timeSoldOut">11:20 AM - SOLD OUT</option>
 </select>