comment suivre lorsque l'utilisateur appuie sur entrée sur la liste déroulante de l'option avec jQuery?

J'ai un formulaire HTML avec une liste déroulante. Je veux obtenir sélectionnés de la liste déroulante de la valeur lorsque l'utilisateur de sélectionner une option par des touches fléchées et appuie sur la touche entrée sur un de la liste déroulante options de

Code HTML:

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Lorsque l'utilisateur sélectionne Mercedes et appuie sur entrée, je veux obtenir cette valeur. Je peux obtenir cette valeur par 

$('option').live('click',function(){

var text = $(this)

});

mais je veux la faire quand ils appuyez sur la enter clé

InformationsquelleAutor Kanishka Panamaldeniya | 2011-08-19
  1. 4

    Ici est un exemple de travail.

    $('select').live('keypress',function(e){
    var key = e.which;
    if(key == 13)//the enter key code
        {
            //do your thing
        }
});

    Comme oezi dit, vous pourriez être à la recherche pour l'événement de changement, mais si vous voulez vraiment capturer l'entrée de pression de touche, c'est la façon de le faire.

    • semble comme K. B Panamaldeniya-littletipz simplement ne pas connaître l'existence de .change(), ce qui semble être exactement ce qu'il cherche. je ne pense pas qu'on devrait le conduire à une solution, que (peut-être) les œuvres, mais peut être remplace par un moyen de trouver la meilleure solution.
    • J'ai presque perdu mon espoir. Et, heureusement, a vu cet exemple. beaucoup de Travail. Merci.
    InformationsquelleAutor gion_13
  2. 1

    Voici votre solution s'il vous plaît essayer

    <!DOCTYPE html>
<html>
<head>

  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>


<select id="ddlDemo">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

<script>



$('#ddlDemo').keyup(function(event) {
if(event.which==13)
{
  var text = $(this).val();
  alert(text);
}

});

</script>



</body>
</html>
    InformationsquelleAutor Hitesh Prajapati
  3. 0

    L'événement change est probablement la bonne façon de faire ici. Cependant, si vous avez besoin de quelque chose pour ne travailler que sur la en appuyant sur entrée, voici un exemple:

    $('select').live('keydown', function(e){
    if (e.keyCode == 13) {
        var text = $(this)
    }
});

    13 est le mot de code pour la touche d'entrée.

    http://jsfiddle.net/z9q8Z/2/

    • -1 exactement ce que gion_13 a presque 6 minutes il y a (et il a utilisé e.which, qui est ce qui devrait être utilisé avec jquery en raison de la compatibilité inter-navigateur: stackoverflow.com/questions/4401305/...)
    InformationsquelleAutor pyvi
  4. 0

    ce que vous cherchez est la change-événement:

    $('select').change(function(){

  var text = $(this).val();
  //whatever to do here

});

    ou, à l'aide de .live() (si cela est nécessaire pour vous):

    $('select').live('change',function(){

  var text = $(this).val();
  //whatever to do here

});

    pour plus d'informations, jetez un oeil à la la documentation.

    PS: vous ne devriez pas lier les événements de la options, le select est la forme de l'élément et doit être utilisé pour lier les événements sur.

    EDIT: ajouté un exemple pour live(), grâce à pyvi pour l'astuce.

    • mm, il n'est pas de travail
    • afin de prendre un coup d'oeil à la documentation-lien que j'ai donné et vérifier ce qui pourrait être mal avec votre code peut être avez vous un problème avec le code à l'intérieur du changement de l'événement. que faites-vous avec text? existe-il d'autres événements liés à la select ou c'est options que peuvent causer le problème? avez-vous des erreurs de messages? plus d'information serait vraiment utile...
    • Le live de la fonction à peu près juste besoin d'être changé à lier "changement" et pas de "clic". Voir jsfiddle.net/z9q8Z/3
    InformationsquelleAutor oezi