javascript - 如果选择，如何更改<option>的输出值？

如何为下拉列表的一个元素赋予一个值，而另一个元素赋予另一个值？

我试图在选择时将不同的值输出到输入字段中。
以下只是一个视觉效果，因此您可以理解问题。

<label>Dropdown-List</label>
<select class="form-control" onchange="handicap();">
<option id="c1">Example (5)</option>
<option id="c2">Example (10)</option>

<input type="text" class="form-control" id="cap">

function handicap() {

  var cap1 = document.getElementById('c1');
  var cap2 = document.getElementById('c2');

  if (cap1) {
     document.getElementById('cap').value = 5;
  }

  else {
     document.getElementById('cap').value = 10;
  }
}

最佳答案

您的条件应为cap1.selected而不是cap1。如果if(cap1)不是cap1或null，则当前条件在undefined中变为true，因此在每种情况下都定义了cap1，因此您始终可以满足该条件，并且input设置为5的值，但是现在当您执行cap1.selected时，它实际上会检查是否选择了cap1选项。

function handicap() {
  var cap1 = document.getElementById('c1');
  var cap2 = document.getElementById('c2');
  if (cap1.selected) {
     document.getElementById('cap').value = 5;
  }
  else {
     document.getElementById('cap').value = 10;
  }
}

<label>Dropdown-List</label>
<select class="form-control" onchange="handicap();">
<option id="c1">Example (5)</option>
<option id="c2">Example (10)</option>

<input type="text" class="form-control" id="cap">

关于javascript - 如果选择，如何更改<option>的输出值？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49335038/