Besoin JavaScript équivalent de jQuery changer la valeur d'une liste déroulante lorsque la valeur d'un champ de texte change

Question

Je travaille sur un formulaire Formstack. J'ai besoin d'utiliser Javascript pour changer la valeur d'une liste déroulante, quelle que soit la valeur saisie dans un champ de texte, une fois qu'une correspondance est établie.

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

Ainsi, dès que quelqu'un tape CIPSmember dans le champ de texte, le menu déroulant doit être sélectionné avec la même valeur. S'il n'y a pas de correspondance, la liste déroulante n'a aucune sélection.

J'ai utilisé le suivant jQuery sur jsFiddle, mais il ne fonctionne pas sur Formstack:

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

Voici une méthode Javascript, je suis en train de jsFiddle cela ne fonctionne pas:

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

I vérifié here, here et peut-être 10 autres endroits mais je ne peux pas le faire fonctionner. Il y a beaucoup de tutoriels sur la façon de changer un champ de texte quand une sélection de liste déroulante change, mais pas autant sur le contraire.

Answer 1

• ID mal orthographié dans getElementById
• support d'extrémité manquante sur la version jQuery
• simplifiée et d'utiliser ce $ (ce)

Je suis cependant curieux. Peut-être que vous voulez un autocomplete à la place?

Voici vos versions fixes

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

---

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