javascript - 如果输入字段中的选项已存在于 json 中，则使该选项处于非事件状态

Question

在我正在构建的页面中，我可以选择预约。此选项是一个输入字段，其中包含“可用”预约时间作为选项。

代码如下:

 <div class="form-group">
        <label class="control-label col-sm-2" for="text">Hour:</label>
        <div class="col-sm-2">
          <select class="form-control" id="time">
            <option value="Time" class="">Time</option>
                        <option value="10am" class="">10:00-10:30</option>
                        <option value="1030am" class="">10:30-11:00</option>
                        <option value="11am" class="">11:00-11:30</option>
                        <option value="1130am" class="">11:30-12:00</option>
                        <option value="12pm" class="">12:00-12:30</option>
                        <option value="1230pm" class="">12:30-13:00</option>
                        <option value="1pm" class="">13:00-13:30</option>
                        <option value="130pm" class="">13:30-14:00</option>
                        <option value="2pm" class="">14:00-14:30</option>
                        <option value="230pm" class="">14:30-15:00</option>
                        <option value="3pm" class="">15:00-15:30</option>
                        <option value="330pm" class="">15:30-16:00</option>
                        <option value="4pm" class="">16:00-16:30</option>
                        <option value="430pm" class="">16:30-17:00</option>
                        </select>
        </div>
      </div>

我还有一个 ajax 请求，它返回一个包含已预订时间的数组。

我想要做的(但不知道如何做)是:使我拥有的列表中的所有预订时间都处于非事件选项。

任何提示将不胜感激。

Answer 1

只需按数组中的值进行过滤即可:

var optionsSet = ["10am", "11am", "4pm"];
$('#time').find('option').filter(function() {
 return optionsSet.indexOf($(this).val()) >= 0;
}).prop('disabled',true);

请注意，如果之前禁用的内容发生更改，则需要启用...

这仅启用然后禁用数组中的当前项:

$('#time').find('option').prop('disabled',false).filter(function() {
 return optionsSet.indexOf($(this).val()) >= 0;
}).prop('disabled',true);