JAVASCRIPT/BOOTSTRAP-如何基於首次選擇選項自動選擇另一個選項？

Question

我試圖根據id="week"（第一選擇）的data-val='OPEN'的選擇從id="month"自動選擇value="blank"選項。如果選擇data-val='OPEN'，我也希望選擇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

使用同樣的方法。當你使用`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 = ''; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<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=""> 
 
     <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

我不知道的方式來增加額外的數據-VAL與引導。但是，如果你願意添加一些額外的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>

你用於 category選項