1
votes

Comment écrire une instruction if lorsqu'une option spécifiée est sélectionnée dans la balise de sélection dans JQuery

Je souhaite avoir une instruction if dans un formulaire, qui ne permettra pas l'envoi du formulaire si la sélection désactivée (espace réservé) est sélectionnée. Cependant, je ne sais pas comment faire cela?

Ma tentative:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <label>Privilege: </label>
  
  <select name="Privilege" id="Privilege" class="dialogin">
    <option id="dis" disabled selected>Select a Privilege:</option>
    <option value="normal">Normal</option>
    <option value="privileged">Privileged</option>
  </select>
  
  <span id="error_last_name" class="text-danger"></span>
</div>

if ($("option:selected") == $('#dis')) {
  error_last_name = 'Last Name is required';
  
  $('#error_last_name').text(error_last_name);
  $('#Event_Name').css('border-color', '#cc0000');
}

Malheureusement, cela ne fait rien. Toute aide est appréciée :) La variable error_last_name a déjà été créée.

jquery forms html-select

0 commentaires

3 Réponses :

0
votes

Vous ne pouvez pas vérifier l'égalité des objets jQuery avec == . Vous avez ici deux possibilités:

En utilisant jQuery # is ( if ( $ ("option: selected") est ($ ('# dis'))) )
En comparant leur valeur ( if ($ ("option: selected"). val () === $ ('# dis'). val ()) )

J'ai utilisé le second pour l'extrait ci-dessous:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <label>Privilege: </label>
  
  <select name="Privilege" id="Privilege" class="dialogin">
    <option id="dis" disabled selected>Select a Privilege:</option>
    <option value="normal">Normal</option>
    <option value="privileged">Privileged</option>
  </select>
  
  <span id="error_last_name" class="text-danger"></span>
</div>

if ($("option:selected").val() === $('#dis').val()) {
  error_last_name = 'Last Name is required';

  $('#error_last_name').text(error_last_name);
  $('#Event_Name').css('border-color', '#cc0000');
}

0 commentaires

0
votes

Au lieu de comparer l'élément entier, la meilleure façon sera de comparer la valeur sélectionnée:

if ($("option:selected")[0] === $('#dis')[0])

Ou si vous souhaitez comparer l'élément:

if ($("option:selected").val() === $('#dis').val())

<option value="default" id="dis" disabled selected>Select a Privilege:</option>

0 commentaires

2
votes

Ajoutez une balise de valeur dans l'option. Utilisez la ligne ci-dessous pour obtenir l'option sélectionnée par valeur. J'ai utilisé l'événement de changement de boîte de sélection pour afficher le message.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <label>Privilege: </label>
  
  <select name="Privilege" id="Privilege" class="dialogin">
    <option value="" id="dis"  selected>Select a Privilege:</option>
    <option value="normal">Normal</option>
    <option value="privileged">Privileged</option>
  </select>
  
  <span id="error_last_name" class="text-danger"></span>
</div>

$("#Privilege").change(function(){
  var getVal = $("#Privilege option:selected").val();

  if (getVal == "") {
    alert("empty");
    // your code
  }
});

var getVal = $("#Privilege option:selected").val();

0 commentaires