selectからselectのタイトルを別のselectのタイトルに表示する

Question

最初の選択メニューで選択したオプションが2番目の選択メニューのタイトルを変更するようにする方法がわかりません。どんな助け？これは私がこれまで持っているものです。

HTML：

<div class="form-group"> 
<label class="col-md-4 control-label">First:</label> 
<select id="select"> 
    <option value="1">Apple</option> 
<option value="2">Orange</option> 
<option value="3">Peach</option> 
</select> 
</div> 

<br> 

<div class="form-group"> 
<label class="col-md-4 control-label" id="output">Second:</label> 
<select> 
    <option value="1">Pineapple</option> 
<option value="2">Grape</option> 
<option value="3">Pear</option> 
</select> 
</div> 

JS：

var e = document.getElementById("select"); 
var output = e.options[e.selectedIndex].text; 

Answer 1

var list1 = document.getElementById("select1"); 
 
var list2Title = document.getElementById("output"); 
 

 
list1.addEventListener("change", function(){ 
 
    output.textContent = this.options[this.selectedIndex].textContent; 
 
});

<div class="form-group"> 
 
<label class="col-md-4 control-label">First:</label> 
 
<select id="select1"> 
 
    <option value="1">Apple</option> 
 
<option value="2">Orange</option> 
 
<option value="3">Peach</option> 
 
</select> 
 
</div> 
 

 
<br> 
 

 
<div class="form-group"> 
 
<label class="col-md-4 control-label" id="output">Second:</label> 
 
<select id="select2"> 
 
    <option value="1">Pineapple</option> 
 
<option value="2">Grape</option> 
 
<option value="3">Pear</option> 
 
</select> 
 
</div>