jQuery select2 obtenir la valeur de la balise select?


95

Bonjour les amis c'est mon code:

<select id='first'>
  <option value='1'> First  </option>
  <option value='2'> Second </option>
  <option value='3'> Three  </option>
</select>

Ceci est mon code select2:

$("#first").select2();

Voici le code pour obtenir la valeur sélectionnée.

$("#first").select2('val'); // It returns first,second,three.

C'est retourner un texte comme first,second,threeet je veux obtenir 1,2,3.
Cela signifie que j'ai besoin de la valeur de la zone de sélection, pas du texte.


Pouvez-vous fournir un JSFiddle? Ça serait bien utile.
Ionică Bizău

1
la question n'est pas claire. que veux-tu exactement?
Hiral

Réponses:


148
$("#first").val(); // this will give you value of selected element. i.e. 1,2,3.

5
$ ("# premier"). val (); // il renvoie 1,2,3 OR $ ("# first"). select2 ('val'); // il revient premier, deuxième, trois
Renish Khunt

$ ("# premier"). val (); renverra 1,2,3 (celui qui est sélectionné) et pouvez-vous poster le code dans la fonction select2 () pour plus de détails.
Somesh

pour une sélection appelée par le nom de l'ID au lieu du nom de la classe, utilisez: $ (". first"). val ()
Rui Martins

@RuiMartins a tort. Les identifiants sont appelés avec "#" et les classes sont appelées avec ".", Donc pour appeler par identifiant, vous utiliseriez $ ("# first"). Val () et pour CLASS vous utiliseriez $ (". First" ) .val ()
Questions de source

58

Pour obtenir l'élément Select, vous pouvez utiliser $('#first').val();

Pour obtenir le texte de la valeur sélectionnée - $('#first :selected').text();

Pouvez-vous s'il vous plaît poster votre select2()code de fonction


1
$ ("# premier"). val (); // il renvoie 1,2,3 OR $ ("# first"). select2 ('val'); // il revient premier, deuxième, trois
Renish Khunt

Je ne suis pas sûr, j'ai bien compris votre question.
Krish R

1
quand j'ai utilisé le plugin select2 alors j'obtiens la valeur en utilisant $ ("# first"). val (). il ne renvoie rien, il retourne vide.
Renish Khunt

Pouvez-vous fournir un exemple de violon avec votre plugin?
Krish R

1
J'ai dû utiliser $('#first :selected').text();l'autre option retournant toutes les options possibles.
Jeff Bluemel

35

$("#first").select2('data') renverra toutes les données sous forme de carte


1
Très utile si vous avez des propriétés supplémentaires sur les objets select2
Chaussure

9

Si vous utilisez ajax , vous souhaiterez peut-être obtenir la valeur mise à jour de select juste après la sélection.

//Part 1

$(".element").select2(/*Your code*/)    

//Part 2 - continued 

$(".element").on("select2:select", function (e) { 
  var select_val = $(e.currentTarget).val();
  console.log(select_val)
});

Crédits: Steven-Johnston


Salut, puis-je savoir d'où ça currentTargetvient? aucun de vos exemples d'identification / de nom n'est lié à la question. Je ne peux donc raconter nulle part.
mastersuse

8

Cette solution vous permet d'oublier l'élément select. Utile lorsque vous n'avez pas d'identifiant sur certains éléments.

$("#first").select2()
.on("select2:select", function (e) {
    var selected_element = $(e.currentTarget);
    var select_val = selected_element.val();
});

4

La réponse simple est:

$('#first').select2().val()

et vous pouvez également écrire de cette manière:

 $('#first').val()

3

Essaye ça :

$('#input_id :selected').val(); //for getting value from selected option
$('#input_id :selected').text(); //for getting text from selected option

@RenishKhunt les réponses ici ne sont pas seulement pour vous (personne qui pose la question), mais aussi pour les autres personnes qui voient cette page. Et plus les solutions sont présentées ici, le meilleur choix a tout le monde, encore une fois: pas seulement vous :)
infografnet

Ouais, je suis désolé. Merci, @infografnet et merci beaucoup Fahmi Imanudin pour avoir posté une réponse :)
Renish Khunt

2

Voyez ce violon .
En gros, vous voulez obtenir le values de vos option-tags, mais vous essayez toujours d'obtenir la valeur de votre select-node avec $("#first").val().

Nous devons donc sélectionner les balises d'options et nous utiliserons les sélecteurs jQuerys:

$("#first option").each(function() {
    console.log($(this).val());
});

$("#first option")sélectionne tout optionce qui est un enfant de l'élément avec l'id first.


$ ("# premier"). val (); // il renvoie 1,2,3 OR $ ("# first"). select2 ('val'); // il revient premier, deuxième, trois
Renish Khunt

Il semble que ma question soit erronée, alors veuillez clarifier exactement ce que vous voulez réaliser.
KeyNone

quand j'ai utilisé le plugin select2 alors j'obtiens la valeur en utilisant $ ("# first"). val (). il ne renvoie rien, il retourne vide.
Renish Khunt

Voyez ce violon . Fonctionne parfaitement bien pour moi. (J'ai ajouté select2.js sous les ressources externes, bien que je ne puisse pas dire pourquoi les boîtes sont laides).
KeyNone du

la clé est que vous avez dit que nous voulons obtenir de la valeur des balises d'option!
Darius.V


0

Les autres réponses ne fonctionnaient pas pour moi, j'ai donc développé une solution:

J'ai créé une option avec class = "option-item" pour un ciblage facile

HTML:

<select id="select-test">
<option value="5-val" id="first-id" class="option-item"> First option </option>
</select>

Ensuite, pour chaque option sélectionnée, j'ai ajouté la propriété display none

CSS:

option:checked {
   display: none;
}

Maintenant, nous pouvons ajouter modifications à notre SelectBox pour trouver l'option sélectionnée avec la propriété display none par simple : attribut caché

JQuery:

$('#select-test').change(function(){
//value 
    $('#select-test').find('.option-item:hidden').val();
//id
    $('#select-test').find('.option-item:hidden').attr('id');
//text
    $('#select-test').find('.option-item:hidden').text();
});

Violon de travail: https://jsfiddle.net/Friiz/2dk4003j/10/


0

Solution :

var my_veriable = $('#your_select2_id').select2().val();
var my_last_veriable = my_veriable.toString();
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.