Question

我正在尝试根据value="blank" {第一选择id="month"的选择，从data-val='OPEN'自动选择id="week"选项。此外，如果选择id="month"，我希望禁用选择data-val='OPEN'。我该如何触发这个？我已经使用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>

Answer 2

使用与"hi/bye", "hello/goodbye"选项相同的方法。

category

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.value = 'blank';
      _month.disabled = true;
    } else {
      category.value = 'CLOSE';
      _month.disabled = false;
    }
  } else {
    category.value = '';
  }
}

JAVASCRIPT / BOOTSTRAP-如何根据首选选项在另一个选择上自动选择选项？

2 个答案: