jQuery select2 get value of select tag?

98

Witajcie przyjaciele, to jest mój kod:

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

To jest mój kod select2:

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

Poniżej znajduje się kod do uzyskania wybranej wartości.

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

To jest zwracanie tekstu takiego jak first,second,threei chcę otrzymać 1,2,3.
Oznacza, że ​​potrzebuję wartości pola wyboru, a nie tekstu.

Renish Khunt
źródło
Czy możesz dostarczyć JSFiddle? Byłoby to bardzo przydatne.
Ionică Bizău
1
pytanie nie jest jasne. dokładnie czego chcesz?
Hiral

Odpowiedzi:

153
$("#first").val(); // this will give you value of selected element. i.e. 1,2,3.
somesh
źródło
5
$ ("# pierwszy"). val (); // zwraca 1,2,3 OR $ ("# pierwszy"). select2 ('val'); // wraca pierwsza, druga, trzecia
Renish Khunt
$ ("# pierwszy"). val (); zwróci 1, 2, 3 (które kiedykolwiek zostanie wybrane) i czy możesz opublikować kod w funkcji select2 (), aby uzyskać więcej szczegółów.
somesh
aby wybrać wywoływaną przez nazwę identyfikatora zamiast nazwy klasy, użyj: $ (". first"). val ()
Rui Martins
@RuiMartins źle. Identyfikatory są wywoływane za pomocą „#”, a klasy są wywoływane za pomocą „.”, Więc aby wywołać według ID, użyjesz $ („# first”). Val (), a dla CLASS użyjesz $ („. First” ) .val ()
Source Matters
60

Aby uzyskać element Select, możesz użyć $('#first').val();

Aby uzyskać tekst o wybranej wartości - $('#first :selected').text();

Czy możesz opublikować swój select2()kod funkcji

Krish R.
źródło
1
$ ("# pierwszy"). val (); // zwraca 1,2,3 OR $ ("# pierwszy"). select2 ('val'); // wraca pierwsza, druga, trzecia
Renish Khunt
Nie jestem pewien, zrozumiałem twoje pytanie.
Krish R
1
kiedy użyłem wtyczki select2, otrzymam wartość za pomocą $ ("# first"). val (). nic nie zwraca, zwraca puste.
Renish Khunt
Czy możesz podać przykład skrzypiec ze swoją wtyczką?
Krish R
1
Musiałem użyć $('#first :selected').text();drugiej opcji, aby zwrócić wszystkie możliwe opcje.
Jeff Bluemel
9

Jeśli używasz Ajax , możesz chcieć uzyskać zaktualizowaną wartość select zaraz po dokonaniu wyboru.

//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)
});

Kredyty: Steven-Johnston

Johny Pie
źródło
Cześć, czy mogę wiedzieć, skąd currentTargetpochodzi? żaden przykład Twojego identyfikatora / nazwiska nie jest powiązany z pytaniem. Więc nie mogę się nigdzie odnaleźć.
mastersuse
8

Takie rozwiązanie pozwala zapomnieć o wybranym elemencie. Przydatne, gdy nie masz identyfikatora wybranych elementów.

$("#first").select2()
.on("select2:select", function (e) {
    var selected_element = $(e.currentTarget);
    var select_val = selected_element.val();
});
Steven Johnston
źródło
4

Prosta odpowiedź brzmi:

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

iw ten sposób możesz napisać również:

 $('#first').val()
Rajiv Sharma
źródło
3

Spróbuj tego :

$('#input_id :selected').val(); //for getting value from selected option
$('#input_id :selected').text(); //for getting text from selected option
Fahmi Imanudin
źródło
@RenishKhunt odpowiedzi tutaj są nie tylko dla Ciebie (osoby zadającej pytanie), ale także dla innych osób, które widzą tę stronę. A im więcej zgłoszonych tu rozwiązań, tym lepszy wybór mają wszyscy inni: nie tylko Ty :)
infografnet
Tak, przepraszam. Dzięki, @infografnet i bardzo dziękuję Fahmi Imanudin za wysłanie odpowiedzi :)
Renish Khunt
2

Zobacz to skrzypce .
Zasadniczo chcesz uzyskać values swoich option-tagów, ale zawsze próbujesz uzyskać wartość swojego select-node za pomocą $("#first").val().

Musimy więc wybrać tagi opcji i użyjemy selektorów jQuerys:

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

$("#first option")wybiera wszystko, optionco jest dzieckiem elementu o identyfikatorze first.

KeyNone
źródło
$ ("# pierwszy"). val (); // zwraca 1,2,3 OR $ ("# pierwszy"). select2 ('val'); // wraca pierwsza, druga, trzecia
Renish Khunt
Wygląda na to, że źle zrozumiałem Twoje pytanie, a następnie wyjaśnij dokładnie, co chcesz osiągnąć.
KeyNone
kiedy użyłem wtyczki select2, otrzymam wartość za pomocą $ ("# first"). val (). nic nie zwraca, zwraca puste.
Renish Khunt
Zobacz to skrzypce . U mnie działa doskonale. (Dodałem select2.js do zasobów zewnętrznych, chociaż nie mogę powiedzieć, dlaczego pudełka wyglądają brzydko).
KeyNone
kluczem było to, że powiedziałeś, że chcemy uzyskać wartość tagów opcji!
Darius.V
0

Inne odpowiedzi nie działały, więc opracowałem rozwiązanie:

Utworzyłem opcję z class = "option-item", aby ułatwić namierzanie

HTML:

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

Następnie dla każdej wybranej opcji dodałem właściwość wyświetlania none

CSS:

option:checked {
   display: none;
}

Teraz możemy dodać zmianę do naszego SelectBox, aby znaleźć naszą wybraną opcję z właściwością display none przez simple : hidden attribute

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();
});

Skrzypce robocze: https://jsfiddle.net/Friiz/2dk4003j/10/

Bartosz Was
źródło
0

Rozwiązanie :

var my_veriable = $('#your_select2_id').select2().val();
var my_last_veriable = my_veriable.toString();
Hafzullah YILDIRIM
źródło