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

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

Answer 1

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