Vérifiez si l'option est sélectionnée avec jQuery, sinon sélectionnez une valeur par défaut


207

À l'aide de jQuery, comment vérifiez-vous si une option est sélectionnée dans un menu de sélection et, dans le cas contraire, attribuez l'une des options comme sélectionnée.

(La sélection est générée avec un labyrinthe de fonctions PHP dans une application dont je viens d'hériter, c'est donc une solution rapide pendant que je me concentre sur celles-ci :)


Réponses:


270

Bien que je ne sois pas sûr de ce que vous voulez accomplir, ce morceau de code a fonctionné pour moi.

<select id="mySelect" multiple="multiple">
  <option value="1">First</option>
  <option value="2">Second</option>
  <option value="3">Third</option>
  <option value="4">Fourth</option>
</select>

<script type="text/javascript"> 
$(document).ready(function() {
  if (!$("#mySelect option:selected").length) {
    $("#mySelect option[value='3']").attr('selected', 'selected');
  }
});
</script>

86
La sélection serait plus facile à lire comme ceci:$("#mySelect").val(3);
Jørn Schou-Rode

6
Cela m'a mis sur la bonne voie, mais je devais le faire: $("#mySelect option")[2]['selected'] = true; compris cela après avoir étudié les structures des objets dans Firebug.
semperos

28
Depuis jQuery 1.6, vous pouvez définir directement la propriété. $("#mySelect").prop("selectedIndex", 2)
gradbot

1
La version .val (x) ne fonctionne pas dans Internet Explorer 8, donc @gradbot a raison, car cela fonctionne dans tous les navigateurs.
Sorcy

30

Pas besoin d'utiliser jQuery pour cela:

var foo = document.getElementById('yourSelect');
if (foo)
{
   if (foo.selectedIndex != null)
   {
       foo.selectedIndex = 0;
   } 
}

58
L'OP a déclaré: "Utilisation de jQuery ...", il semble donc superflu de l'ignorer, non?
BryanH

13
Personnellement, si je pose une question spécifique, j'aimerais obtenir la réponse à la question plutôt que d'une manière différente.
vitto

18
Parfois, la réponse que vous cherchez n'est pas celle que vous attendez.
MrBoJangles

5
Quoi qu'il en soit, il a demandé jQuery, et la réponse jQuery est un peu plus facile à comprendre, surtout si l'on ne comprend pas le JavaScript de base.
shmeeps

6
Excellent moyen de le faire, parfois le javascript de base peut être très pratique!
Hallaghan

13

Cette question est ancienne et a beaucoup de points de vue, donc je vais juste jeter quelques trucs là-bas qui aideront certaines personnes, je suis sûr.

Pour vérifier si un élément sélectionné contient des éléments sélectionnés:

if ($('#mySelect option:selected').length > 0) { alert('has a selected item'); }

ou pour vérifier si une sélection n'a rien de sélectionné:

if ($('#mySelect option:selected').length == 0) { alert('nothing selected'); }

ou si vous êtes dans une boucle quelconque et que vous souhaitez vérifier si l'élément actuel est sélectionné:

$('#mySelect option').each(function() {
    if ($(this).is(':selected')) { .. }
});

pour vérifier si un élément n'est pas sélectionné dans une boucle:

$('#mySelect option').each(function() {
    if ($(this).not(':selected')) { .. }
});

Ce sont quelques-unes des façons de procéder. jQuery a plusieurs façons d'accomplir la même chose, vous choisissez donc généralement celle qui semble la plus efficace.


"not" n'a pas fonctionné pour moi $ ('# mySelect option'). each (function () {if ($ (this) .not (': selected')) {..}}); Ainsi, une négation est utilisée comme si (! $ (This) .is (': selected')) {..} Navigateur: Chrome; Version Jquery: 3.1.1
Anil kumar

12

la réponse de lencioni est ce que je recommanderais. Vous pouvez modifier le sélecteur de l'option ('#mySelect option:last')pour sélectionner l'option avec une valeur spécifique à l'aide de " #mySelect option[value='yourDefaultValue']". Plus sur les sélecteurs .

Si vous travaillez beaucoup avec des listes sélectionnées sur le client, consultez ce plugin: http://www.texotela.co.uk/code/jquery/select/ . Jetez un œil à la source si vous souhaitez voir d'autres exemples d'utilisation de listes sélectionnées.


9

Voici ma fonction changeant l'option sélectionnée. Cela fonctionne pour jQuery 1.3.2

function selectOption(select_id, option_val) {
    $('#'+select_id+' option:selected').removeAttr('selected');
    $('#'+select_id+' option[value='+option_val+']').attr('selected','selected');   
}

7
<script type="text/javascript"> 
$(document).ready(function() {
  if (!$("#mySelect option:selected").length)
   $("#mySelect").val( 3 );

});
</script>

3

Facile! La valeur par défaut devrait être la première option. Terminé! Cela vous mènerait à un JavaScript discret, car JavaScript n'est pas nécessaire :)

JavaScript discret


3

J'ai déjà rencontré le plugin texotela mentionné, qui m'a permis de le résoudre comme ceci:

$(document).ready(function(){
    if ( $("#context").selectedValues() == false) {
    $("#context").selectOptions("71");
    }
});


2

C'était un script rapide que j'ai trouvé qui fonctionnait ... Le résultat est assigné à une étiquette.

$(".Result").html($("option:selected").text());

1

Vous en faites trop pour la sélection. Sélectionnez simplement par valeur:

$("#mySelect").val( 3 );

2
Ceci sélectionne l'option 3, même si une autre option est déjà sélectionnée.
Jordan Ryan Moore


1

J'ai trouvé un bon moyen de vérifier si l'option est sélectionnée et de sélectionner une valeur par défaut lorsqu'elle ne l'est pas.

    if(!$('#some_select option[selected="selected"]').val()) {
        //here code if it HAS NOT selected value
        //for exaple adding the first value as "placeholder"
        $('#some_select option:first-child').before('<option disabled selected>Wybierz:</option>');
    }

Si #some_select n'a pas l'option sélectionnée par défaut, alors .val () n'est pas défini


0
$("option[value*='2']").attr('selected', 'selected');
// 2 for example, add * for every option

0
$("#select_box_id").children()[1].selected

C'est une autre façon de vérifier qu'une option est sélectionnée ou non dans jquery. Cela renverra Boolean (True ou False).

[1] est l'index de l'option de boîte de sélection


0

Modifiez l'événement sur la boîte de sélection pour déclencher et une fois qu'il le fait, tirez simplement l'attribut id de l'option sélectionnée: -

$("#type").change(function(){
  var id = $(this).find("option:selected").attr("id");

  switch (id){
    case "trade_buy_max":
      // do something here
      break;
  }
});

0

Je cherchais juste quelque chose de similaire et j'ai trouvé ceci:

$('.mySelect:not(:has(option[selected])) option[value="2"]').attr('selected', true);

Cela trouve tous les menus de sélection dans la classe qui n'ont pas déjà une option sélectionnée et sélectionne l'option par défaut ("2" dans ce cas).

J'ai essayé d'utiliser :selectedau lieu de [selected], mais cela n'a pas fonctionné car quelque chose est toujours sélectionné, même si rien n'a l'attribut


0

Si vous devez vérifier explicitement chaque option pour voir si certaines ont l'attribut "sélectionné", vous pouvez le faire. Sinon, option:selectedvous obtiendrez la valeur de la première option par défaut.

var viewport_selected = false;      
$('#viewport option').each(function() {
    if ($(this).attr("selected") == "selected") {
        viewport_selected = true;
    }
});
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.