Dev Faq
-1
votes

Alerter l'option sélectionnée apparaît à plusieurs reprises

L'alerte fonctionne pour la première fois. Cependant, lorsque je modifie l'option à nouveau (sans rafraîchir la page), il alerte les deux options, c'est-à-dire. La première option sélectionnée et la deuxième option sélectionnée également.

Je veux obtenir une valeur de l'option sélectionnée lorsque je clique sur le bouton. Quelqu'un peut-il me guider sur la façon dont je peux y parvenir? xxx xxx

Vous pouvez tester mon code en plaçant dans une URL ci-dessous

https://www.w3schools.com/jquery/tryit.asp?fileName=Jequent_change_ref < / p>

2 commentaires

Le problème est que vous créez un nouveau Cliquez sur HANDER à chaque fois que le change incendie d'événement . Déplacez le Cliquez sur HANDER EXTÉRIEUR du Modifier .

Cliquez sur l'événement déclenché dans votre événement de changement, sa boucle infinie! ?

5 Réponses :

0
votes 
<script>
$(document).ready(function(){
  var value;
  $(".test").change(function(){
    value = $(this).val();
  });
  $('.button').click(function(){
      alert(value);
  });
});
</script>

<select class="test">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<button class="button" value="button">button</button>
As suggested by @Rory
1 commentaires

Oui, je pense: p mon mauvais,

1
votes

Vous devez lier le gestionnaire de clic immédiatement, et une seule fois, pas sur chaque changement de l'entrée, car vous êtes accumuler em> tous ceux qui cliquent des gestionnaires ... entraînant une quantité croissante d'alertes:

p> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="test">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<button class="button" value="button">button</button>

0 commentaires
1
votes

Utiliser .Off (), la méthode supprime les gestionnaires d'événements attachés avec .on (). 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="test">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<button class="button" value="button">button</button>
<button class="button2" value="button2">button2</button>

3 commentaires

Je veux dire, techniquement cela fonctionnerait, mais il est très loin d'être une bonne pratique.

Ahh merci. Apprendre de nouvelles choses. Gardez cette pointe à l'esprit.

@Shree je ne peux pas utiliser () pour deux fois comme étant le dernier éteint () ne fonctionnera que n'importe quelle suggestion, car j'ai deux boutons différents et une option de sélection

0
votes

Essayez ceci: xxx

0 commentaires
0
votes 
$(document).ready(function(){

$(".test").change(function() {
       alert($(this).find(":selected").val())
    })
})
2 commentaires

S'il vous plaît ne publiez pas seulement le code comme réponse, mais fournissez également une explication de votre code et de la manière dont il résout le problème de la question. Les réponses avec une explication sont généralement de meilleure qualité et sont plus susceptibles d'attirer des upvotes.

Merci pour votre suggestion. La prochaine fois que je vais essayer d'expliquer

Articles qui pourrait vous intéresser :

Select2 ne s'affiche pas correctement dans le mode bootstrap
datetimepicker ne fonctionne pas avec bootstrap 4?
L'appel Ajax n'affiche pas de réponse en cas de succès
django admin - Comment ajouter du javascript à la fin d'un fichier