javascript - 当文本字段的值更改时，需要等效于 jQuery 的 JavaScript 更改下拉列表的值

Question

我正在处理 Formstack 表单。我需要使用 Javascript 将下拉框的值更改为匹配后输入到文本字段中的值。

<input type="text" id="field35497729" name="field35497729" size="50" value="" class="fsField">
<select id="field35497839" name="field35497839" size="1" class="fsField">
<option value="">&nbsp;</option>
<option value="CIPSmember">CIPSmember</option>
<option value="TECHCONNEXmember">TECHCONNEXmember</option>
<option value="TCBCpreferred">TCBCpreferred</option>
<option value="TCBCcomp2015">TCBCcomp2015</option>
</select>

因此，一旦有人在CIPSmember文本字段中输入内容，就应该选择具有相同值的下拉列表。如果没有匹配项，则下拉列表没有选择。

我在 jsFiddle 上使用了以下 jQuery，但它不适用于 Formstack：

$('#field35497729').keyup( function() {
$("#field35497839").val($('#field35497729').val()); 
}
);

这是我在 jsFiddle 上尝试的一种无效的 Javascript 方法：

document.getElementByID('field35497729').onkeyup = function() {
document.getElementById('field35497839').value = document.getElementByID('field35497729').value;
};

我检查了这里、这里以及其他 10 个地方，但我无法让它工作。有很多关于如何在下拉选择更改时更改文本字段的教程，但相反的教程并不多。

Answer 1

• getElementById中的 ID 拼写错误
• jQuery 版本缺少端括号
• 简化为使用 this 和 $(this)

不过我很好奇。也许您想要一个自动完成功能？

这是您的固定版本

纯JS版本

window.onload=function() {
    document.getElementById('field35497729').onkeyup = function() {
    document.getElementById('field35497839').value = this.value;
  }
}

<input type="text" id="field35497729" name="field35497729" size="50" value="" class="fsField">
<select id="field35497839" name="field35497839" size="1" class="fsField">
<option value="">&nbsp;</option>
<option value="CIPSmember">CIPSmember</option>
<option value="TECHCONNEXmember">TECHCONNEXmember</option>
<option value="TCBCpreferred">TCBCpreferred</option>
<option value="TCBCcomp2015">TCBCcomp2015</option>
</select>

---

jQuery版本

$(function() {
  $('#field35497729').on("keyup",function() {
    $("#field35497839").val($(this).val()); // or (this.value)
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="field35497729" name="field35497729" size="50" value="" class="fsField">
    <select id="field35497839" name="field35497839" size="1" class="fsField">
    <option value="">&nbsp;</option>
    <option value="CIPSmember">CIPSmember</option>
    <option value="TECHCONNEXmember">TECHCONNEXmember</option>
    <option value="TCBCpreferred">TCBCpreferred</option>
    <option value="TCBCcomp2015">TCBCcomp2015</option>
    </select>