Afficher la valeur sélectionnée d'une liste déroulante dans un champ de texte (javascript)

Par Exemple:
Ce sont les éléments dans une liste déroulante.

<select name="cmbitems" id="cmbitems">
    <option value="price1">blue</option>
    <option value="price2">green</option>
    <option value="price3">red</option>
</select>

Lorsque l'utilisateur sélectionne le bleu, je veux afficher la valeur de prix 1 dans un champ de texte ci-dessous:

<input type="text" name="txtprice" id="txtprice" onClick="checkPrice()">

Merci de répondre à

si vous sentez que toute réponse à résoudre votre problème, veuillez le tag ' la bonne réponse.

OriginalL'auteur NLimbu | 2012-05-09

  1. 5

    Tout ce que vous devez faire est de définir la valeur de l'entrée de la valeur de la sélectionner, dans un select.gestionnaire d'événements onchange.

    var select = document.getElementById('cmbitems');
var input = document.getElementById('txtprice');
select.onchange = function() {
    input.value = select.value;
}

    Ici est un lien vers un jsFiddle démo

    OriginalL'auteur jumpnett

  2. 0

    Ce est la force brute façon de chercher l'option actuellement sélectionnée, vérifiez sa valeur et l'utilisation de son texte d'affichage de mise à jour de votre entrée. Comme Daniele a suggéré, si vous avez jquery à votre disposition, cela devient beaucoup, beaucoup plus facile. Mais si vous ne pouvez pas utiliser de JS cadre pour une raison quelconque, cela devrait vous obtenez ce dont vous avez besoin.

    <select name="cmbitems" id="cmbitems" onchange="updateTextField()">
 ...
</select>
<input type="text" ..... />

<script type="text/javascript">
function updateTextField()
{
    var select = document.getElementById("cmbitems");
    var option = select.options[select.selectedIndex];
    if (option.id == "price1")
    {
        document.getElementById("txtprice").value = option.text;
    }
}
</script>

    OriginalL'auteur Rob S

  3. 0
    $.on('change', '#cmbitems', function() {
    $('#txtprice').val($('#cmbitems option:selected').val());
});

    OriginalL'auteur Nick George

  4. 0

    Si vous utilisez jquery juste aller avec

    $('select.foo option:selected').val();    //get the value from a dropdown select

    Mise à JOUR ( j'ai oublié pour les suivants de la <input> de la population)

    Premier, les suivants jquery dans votre fichier html.

    Dans le <header> vous l'incluez:

    <header>
<script type="text/javascript" src="YOUR_PATH_TO_LIBRARY/jquery-1.7.1-min.js"></script>
</header>

    Puis

    <input type="text" name="txtprice" id="txtprice" onClick="javascript:$('select.foo option:selected').val();">
    désolé j'ai oublié de mentionner dans le code javascript
    Cela ne fera que vous donner la valeur de l'élément sélectionné(s).. pour ne pas les remplir à l'entrée. Vérifier ma réponse ci-dessous pour plus de détails.
    jquery est une bibliothèque javascript pour rendre votre vie plus facile! Avoir un coup d'oeil et puis, vous découvrirez un tout nouveau - plus simple - manière de coder.

    OriginalL'auteur Daniele B