JAVASCRIPT/BOOTSTRAP-最初に選択するオプションに基づいて、別の選択肢でオプションを自動選択する方法は？

Question

data-val='OPEN'の選択に基づいてvalue="blank"をid="month"からid="week"（最初の選択）から自動選択しようとしています。 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

私は、ブートストラップで、追加のデータ・ヴァルさんを追加する方法を知りません。しかし、もしあなたが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>