顯示從選擇到另一個選擇標題的選擇選項

Question

我無法弄清楚如何使它在第一個選擇菜單中選擇的選項更改第二個選擇菜單的標題。任何幫助？這是我到目前爲止有：

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>