Déclencheur onchange de l'élément de sélection HTML pour l'option déjà sélectionnée

J'ai le code HTML suivant contenant une liste déroulante (un seul choix)

        <script type="text/javascript">
            $(document).ready(function () {
                $("#garden").bind('change', function() {
                    alert("Changed");
                    });
            });
        </script>
    <body>
        <div id="content">  
           <select id="garden">
             <option value="flowers">Flowers</option>
             <option value="shrubs">Shrubs</option>
             <option value="trees">Trees</option>
             <option value="bushes">Bushes</option>                 
           </select>
        </div>
    </body>
</html>

Lorsque la page HTML est rendu, Flowers est déjà à l'élément sélectionné dans la liste déroulante par défaut (la première). Si je sélectionne une autre valeur (autres que les "Fleurs"), la fonction javascript est déclenché et une boîte d'alerte contenant "Changé" est affichée.

Q1: Mais, dans le cas où je re-sélectionner Flowers encore une fois, la onchange événement n'est pas déclenché. Je comprends que c'est parce que rien n'a été "modifié" dans la liste déroulante. Est-il possible qu'une fonction est déclenchée, même en l'absence de changement de la valeur sélectionnée dans la liste déroulante est fait?

Q2: Comment faire pour extraire la valeur de l'élément qui vient d'être sélectionné (même si rien de nouveau n'a été sélectionné, l'utilisateur a cliqué sur le menu déroulant, puis clique simplement ailleurs).

J'ai déjà essayé le "onblur", mais qui nécessite que l'utilisateur clique quelque part d'autre sur le document de sorte que la liste déroulante perd le focus. Toute aide serait vraiment appréciée.

Merci beaucoup.
[J'ai édité les en-têtes HTML et autres script inclusions dans l'extrait de code fourni par souci de concision.]

source d'informationauteur Shrey

3

Bien, je pense que je ne suis pas à 100%, mais certaines choses que je peux suggérer ici sont:
- lier un gestionnaire d'événements click pour la select
```
$("#garden").bind('click', function() {
     alert($(this).find('option:selected').text());
});
```
- lier un focusout gestionnaire d'événement
```
$("#garden").bind('focusout', function() {
     alert($(this).find('option:selected').text());
});
```
et bien sûr de lier le change gestionnaire d'événement qui vous avez déjà obtenu. Le click event handler peut-être un peu délicate, car il mettrait le feu à chaque fois que vous cliquez sur l'élément. Mais si vous n'avez pas alert() à chaque fois il ne devrait pas être un problème du tout, vous avez obtenu la sélection en cours et pouvez en faire ce que vous voulez.
3

Vous pouvez déclencher manuellement l'événement lors du chargement de la page:
```
$(document).ready(function() {
    $("#garden").bind("change", function() {
        //...
    }).change();
});
```
Ce sera ramasser la valeur initiale - donc, je pense qu'il est de votre deuxième question hors de propos. Cela ne fonctionne pas dans toutes les situations (je suis en espérant que votre gestionnaire réel n'est pas une alerte, mais en fait quelque chose d'utile!), mais pourrait venir dans maniable...
2

Êtes-vous sûr que ce que vous faites est la façon la plus sensée à faire des choses? Il semble très étrange de l'INTERFACE utilisateur à changer de comportement si vous sélectionnez un élément en le laissant comme le défaut par rapport à la sélection par l'ouverture de la sélectionner et de la sélection de l'élément actuellement sélectionné.

Si vous êtes désireux de faire explicitement choisir des fleurs alors peut-être que vous voulez une entrée factice en haut qui dit "s'il vous Plaît choisir l'un" que sera alors dire qu'ils sont obligés de changer de fleurs, si c'est ce qu'ils veulent. Il serait probablement plus simple que de compliquer votre code avec plus de gestionnaires d'événements et tel comme.

Si vous ne vraiment besoin de descendre le chemin que vous suivez, alors vous pouvez envisager ce que le comportement est si quelqu'un juste onglets pour le contrôle et puis au-delà. c'est à dire doivent que le feu de votre script off ainsi?

Modifier pour répondre aux commentaires à longueur de temps:

Ce que vous voulez faire dans ce cas est le crochet dans le onSubmit gestionnaire de la forme. Cela s'appelle, comme vous pouvez l'imaginer, quand la forme soumet. Si votre gestionnaire retourne false que le formulaire ne sera pas soumis.

Ce gestionnaire est traditionnellement où vous feriez la validation côté client par l'examen de l'état de quelque forme que ce soit les éléments que vous aimez et le contrôle de leur valeurs sont valides. Dans ce cas, vous devriez vérifier si la valeur de jardin était "N/A" ou tout ce que vous définissez et si oui, affiche une alerte (dans le cas le plus simple) et éventuellement de la marque selon les champs ont besoin d'attention. Ensuite, l'utilisateur va choisir une entrée valide (on l'espère) et la prochaine fois qu'il soumet à votre validation de réussir, vous retourner la valeur true dans le gestionnaire et l'utilisateur peut être heureux, il a soumis d'entrée valide.

Comme toujours, bien que le niveau de décharge de responsabilité que toutes les données peuvent être envoyées à votre serveur par un utilisateur de sorte que vous ne devriez pas supposer que juste parce que vous avez eu cette validation que vous obtenir des données valides sur le serveur. 🙂
0

Question 1: je pense que l'événement que serait "onSelect".

Question 2: je pense que le "onSelect" événement aura aussi, d'ailleurs, pas sûr à 100%. Quelque chose à essayer au moins et le désordre.
0

À mon avis, la solution la plus simple est de dupliquer la première option dans un désactivée et non de l'élément ayant la même étiquette. Votre liste déroulante affichera l'étiquette de l'option masqué, mais il ne sera donc pas affiché dans la liste.
```
<select id="garden" name="blabla" onchange="this.form.submit();" >
  <option value="" disabled selected style="display:none;">Flowers</option>
  <option value="flowers" >Flowers</option>
  <option value="shrubs" >Schrubs</option>
  <option value="trees" >Trees</option>
  <option value="bushes" >Bushes</option>
</select>
```
Votre question semble même que SÉLECTIONNEZ HTML - Déclencheur JavaScript événement ONCHANGE même si l'option n'est pas modifié
et la solution mentionnée ci-dessus a été fournie par Simon Aronsson.

Nota bene : la solution fonctionne parfaitement avec Firefox mais pas avec Internet Explorer.

Vous devez vous connecter pour publier un commentaire.