需要 JavaScript 相当于 jQuery 在文本字段的值更改时更改下拉列表的值

Need JavaScript equivalent of jQuery changing the value of a dropdown when the value of a text field changes

我正在处理 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;
};

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

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

不过我很好奇。也许您想要一个 autocomplete

这是您的固定版本

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