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

Answer 2

您迭代每个<option>并将其设置为禁用，如果其值存在于您提及的数组中。否则重新设置为启用。

const youArray = ["10am", "11am", "4pm"];

$('#time option').toArray().map($).forEach(function(optionEl) {
  if (youArray.indexOf(optionEl.val()) >= 0) {
    optionEl.prop('disabled', true);
  } else {
    optionEl.prop('disabled', false);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

Answer 3

首先，为您预订的小时选项创建一个选择器。并使用它来禁用项目。

// contains the list of booked hours
resp = ['Time','10am', '330pm'];

function update(){
  var sel = '';

  for(var i=0; i < resp.length; i++){
    sel += ",#time [value='" + resp[i] + "'] ";
  }
  sel = sel.substr(1);
  $("#time option").removeAttr('disabled');
  $(sel).attr('disabled',true);
}

update();

在此处找到有效的代码：https://jsbin.com/geyiyubogi

如果输入字段中的选项已存在于json中，则使其处于非活动状态

3 个答案: