javascript - 如何使 SELECT 字段的选定选项与另一个选择字段 Onchange 相同？

Question

所以我有一个名为 TRIP ID 的选择字段，其选项来自数据库。我还有另一个名为 APS 权重的选择字段，它具有三个选项。 STA、STB、STC - 但这三个选项的值实际上是数字而不是 STA、STB、STC。 STA、STB、STC是什么，其实就是这些选择选项的InnerHTML。

我的问题是我想正确选择一个TRIP ID，然后onChange选择的APS Weight选项变成了TRIP ID值的前三个字母。

 <select name="tripid" id="tripid" style="width: 300px"
        onchange="document.getElementById('aps').value=tripid.value.slice(0,3)">

我认为我的代码不起作用，因为。 APS Weight 上的选项值实际上是数字而不是字符串。

Answer 1

希望这会有所帮助!

const setAps = () => {

  const select = document.getElementById("tripid");
  const selectedOption = select.options[select.selectedIndex];
  const selectedText = selectedOption.text;
  const aps = selectedText.slice(0, 3);

  const apsSlect = document.getElementById("aps");
  const textToSelect = aps;

  for (var i = 0; i < apsSlect.options.length; i++) {
    if (apsSlect.options[i].text === textToSelect) {
      apsSlect.selectedIndex = i;
      break;
    }
  }

}

<select name="tripid" id="tripid" onChange="setAps()">
  <option>- Select-</option>
  <option value="1">STAABC Trip Location 1</option>
  <option value="2">STCABC Trip Location 2</option>
  <option value="3">STCABC Trip Location 3</option>
  <option value="4">STAABC some Location</option>
  <option value="5">STBXYZ some Location</option>
  <option value="6">STBXYZ some Location 2</option>
</select>

<select name="aps" id="aps">
  <option>- Select APS Weight-</option>
  <option value="1">STA </option>
  <option value="2">STB</option>
  <option value="3">STC</option>
</select>