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>

显示从选择到另一个选择的标题的所选选项

1 个答案: