Question

我有一个允许输入文字的输入框（类型=＆＃34;文字＆＃34;），旁边有一个带2个选项的选择框。选择框的第一个选项是＆＃34;地址＆＃34; （默认标记为选中），第二个是＆＃34;距离＆＃34;。虽然第一个选项要求输入类型为文本，但第二个选项只需要数字......

我想这样做，以便当用户点击＆＃34;距离＆＃34;作为一个选项，它会改变它旁边输入框的输入类型，输入=＆＃34; number＆＃34;。

<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>

我已经用Google搜索了，我似乎无法找到这个...我之前在这里问了几个关于输入和JS的问题，所以我知道我需要抓住它们按他们的身份证明。在那之后，我真的不知道。

的伪代码：

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。

Answer 1

selectBox.value就足够了。value将是字符串，它没有selected属性。 inputBox.type
也是如此

＆＃13;

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);

＆＃13;

<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>

＆＃13;

Answer 2

尝试使用setAttribute

function addressChange() {
    var inputBox = document.getElementById('send-address');
    var selectBox = document.getElementById('send-dist-type');
    inputBox.setAttribute("type", selectBox.value );
}

JS：根据选择选项更改输入类型？

2 个答案: