javascript - JS:根据选择选项更改输入类型？

我有一个允许输入文本的输入框（type =“ text”），此外还有一个带有2个选项的选择框。选择框的第一个选项是“地址”（默认标记为选中），第二个选项是“距离”。第一个选项要求输入类型为文本，第二个选项仅要求数字...

我要这样做，以便当用户单击“距离”作为选项时，它将旁边的输入框的输入类型更改为type =“ number”。

<div class="row collapse-col connect-input">
    <div class="col-1-2">
        <input name="send_address" id="send-address" type="text" placeholder="Address">
    </div>
    <div class="col-1-2">
        <select name="send_dist_type" id="send-dist-type">
            <option value="address" selected>Address (Default)</option>
            <option value="distance">Distance (km)</option>
        </select>
    </div>
</div>

我到处搜索，似乎找不到答案...之前我在这里问过关于输入和JS的几个问题，所以我知道我需要用它们的ID来获取它们。在那之后，我真的不知道。

伪代码：

function addressChange() {
    var inputBox = document.getElementById('send-address');
    var selectBox = document.getElementById('send-dist-type');
    if (selectBox.value.selected == 'distance') {
        inputBox.type.change = 'number';
    } else {
        inputBox.type.change = 'text';
    }
}

我在正确的道路上吗？任何帮助表示赞赏。

我想远离jQuery。

最佳答案

selectBox.value足够。.value将是字符串，并且不具有selected属性。 inputBox.type也是如此

function addressChange() {
  var inputBox = document.getElementById('send-address');
  this.value == 'distance' ? inputBox.type = 'number' : inputBox.type = 'text';
}

document.getElementById('send-dist-type').addEventListener('change', addressChange);

<div class="row">
  <div class="col-1">
    <div class="row collapse-col">
      <div class="col-1">
        <label for="send-address"><b>Address/Distance</b>
        </label>
      </div>
      <div class="row collapse-col connect-input">
        <div class="col-1-2">
          <input name="send_address" id="send-address" type="text" placeholder="Address">
        </div>
        <div class="col-1-2">
          <select name="send_dist_type" id="send-dist-type">
            <option value="address" selected>Address (Default)</option>
            <option value="distance">Distance (km)</option>
          </select>
        </div>
      </div>
    </div>
  </div>