JAVASCRIPT/BOOTSTRAP-如何根据第一次选择的选项自动选择另一个选择的选项？

Question

我正在尝试根据 data-val= 的选择从 id="month" 中自动选择选项 value="blank" 'OPEN' 来自 id="week"(第一次选择)。如果选择了 data-val='OPEN'，我还希望禁用 select id="month"。我如何触发这个？我已经使用 data-val 来触发选择 id="Delivery"。

var category = document.getElementById('Delivery');
document.getElementById('week').onchange = function() {
  var optionSelected = this.options[this.selectedIndex];
  if (optionSelected.textContent != '-') {
    if (optionSelected.dataset.val === 'OPEN') {
      category.value = 'OPEN';
    } else {
      category.value = 'CLOSE';
    }
  } else {
    category.value = '';
  }
}

<div class="control-group">
  <div>
    <label for="week">Dispatch schedule:</label>
    <select class="form-control" name="week" id="week" title="Delivery" style="width:110px;">
            
            <option data-val='OPEN' value="READY">Ready</option>
             
            <option data-val='CLOSE' value="1st WEEK">1st Week</option>
             
            <option data-val='CLOSE' value="2nd WEEK">2nd Week</option>
              
            <option data-val='CLOSE' value="3rd WEEK">3rd Week</option>
            </select>
  </div>


  <div class="myselection">
    <select name="Delivery" id="Delivery" disabled="">
            <option value="OPEN">Open</option>
            <option value="CLOSE">Close</option>
            </select>
  </div>

  <div>
    <label for="month">Select Month: </label>
    <select class="form-control" name="month" id="month" style="width:70px;" >
                                             
            <option value="blank">- - -</option>
            <option value="Jan">Jan</option>
            <option value="Feb">Feb</option>
            <option value="Mar">Mar</option>
            <option value="Apr">Apr</option>
            <option value="May">May</option>
            <option value="Jun">Jun</option>
            <option value="Jul">Jul</option>
            <option value="Aug">Aug</option>
            <option value="Sep">Sep</option>
            <option value="Oct">Oct</option>
            <option value="Nov">Nov</option>
            <option value="Dec">Dec</option>
             </select>
  </div>
</div>

Answer 1

我不知道有什么方法可以使用 Bootstrap 添加额外的数据值。但是，如果您愿意添加一些额外的 javascript 行，则可以实现。

var category = document.getElementById('Delivery');
var month = document.getElementById('month');

document.getElementById('week').onchange = function() {
  var optionSelected = this.options[this.selectedIndex];
  if (optionSelected.textContent != '-') {
    if (optionSelected.dataset.val === 'OPEN') {
      category.value = 'OPEN';
      month.disabled = true;
      month.value = 'blank';
    } else {
      category.value = 'CLOSE';
      month.disabled = false;      
    }
  } else {
    category.value = '';
  }
}

 <div class="control-group">
        <div>
        <label for="week">Dispatch schedule:</label>
        <select class="form-control" name="week" id="week" title="Delivery" style="width:110px;">

        <option data-val='OPEN' value="READY">Ready</option>

        <option data-val='CLOSE' value="1st WEEK">1st Week</option>

        <option data-val='CLOSE' value="2nd WEEK">2nd Week</option>

        <option data-val='CLOSE' value="3rd WEEK">3rd Week</option>
        </select>
        </div>


        <div class="myselection">
        <select name="Delivery" id="Delivery" disabled="">
        <option value="OPEN">Open</option>
        <option value="CLOSE">Close</option>
        </select>
        </div>

        <div>
        <label for="month">Select Month: </label>
        <select class="form-control" name="month" id ="month" style="width:70px;" disabled=true>

        <option value="blank">- - -</option>
        <option value="Jan">Jan</option>
        <option value="Feb">Feb</option>
        <option value="Mar">Mar</option>
        <option value="Apr">Apr</option>
        <option value="May">May</option>
        <option value="Jun">Jun</option>
        <option value="Jul">Jul</option>
        <option value="Aug">Aug</option>
        <option value="Sep">Sep</option>
        <option value="Oct">Oct</option>
        <option value="Nov">Nov</option>
        <option value="Dec">Dec</option>
         </select> 
        </div>
</div>