javascript - jQuery Obțineți opțiunea selectată din lista derulantă

De obicei folosesc $ ("#id").val() pentru a returna valoarea opțiunii selectate, dar de data aceasta nu funcționează. Eticheta selectată are id-ul aioConceptName

cod HTML

<label for="name">Name</label>
<input type="text" name="name" id="name" />

<label for="aioConceptName">AIO Concept Name</label>
<select id="aioConceptName">
    <option>choose io</option>
    <option>roma</option>
    <option>totti</option>
</select>

Răspuns #1

Pentru opțiunile din meniul derulant probabil că vrei ceva de genul acesta:

Pentru textul selectat

var conceptName = $('#aioConceptName').find(":selected").text();

Pentru valoarea selectată

var conceptName = $('#aioConceptName').find(":selected").val();

Motivul pentru care val() nu funcționează este că apăsarea pe o opțiune nu schimbă valoarea dropdown-ului - doar adaugă proprietatea :selected opțiunii selectate, care este un copil al dropdown-ului.

Răspunsul #2

Setați valorile pentru fiecare dintre opțiuni

<label for="aioConceptName">AIO Concept Name</label>
<select id="aioConceptName">
    <option value="0">choose io</option>
    <option value="1">roma</option>
    <option value="2">totti</option>
</select>

$ ('#aioConceptName').val() nu a funcționat deoarece .val() returnează atributul value. Pentru ca acesta să funcționeze corect, atributele value trebuie setate pe fiecare <option>.

Acum poți să apelezi $ ('#aioConceptName').val() în loc de tot acest :selected voodoo sugerat de alții.

Răspunsul #3

Am dat peste această întrebare și am dezvoltat o versiune mai concisă a răspunsului lui Elliot Bonneville:

var conceptName = $('#aioConceptName :selected').text();

sau generic:

$('#id :pseudoclass')

Acest lucru îți economisește un apel suplimentar jQuery, selectează totul dintr-o singură dată și este mai clar (părerea mea).

Răspunsul #4

Încearcă asta pentru valoare...

$("select#id_of_select_element option").filter(":selected").val();

sau asta pentru text...

$("select#id_of_select_element option").filter(":selected").text();

Răspunsul #5

Dacă sunteți în contextul unui eveniment, în jQuery, puteți obține elementul opțiune selectat folosind :
$ (this).find('option:selected') astfel :

$('dropdown_selector').change(function() {
    //Use $option (with the "$") to see that the variable is a jQuery object
    var $option = $(this).find('option:selected');
    //Added with the EDIT
    var value = $option.val();//to get content of "value" attrib
    var text = $option.text();//to get <option>Text</option> content
});

Editare

Așa cum a menționat PossessWithin, răspunsul meu răspunde doar la întrebarea: Cum să selectezi „Opțiunea” selectată.

Apoi, pentru a obține valoarea opțiunii, folosește option.val().

Răspuns #6

Te-ai gândit să folosești vechiul și simplul JavaScript?

var box = document.getElementById('aioConceptName');

conceptName = box.options[box.selectedIndex].text;

Vezi de asemenea Obținerea unui text/valori a unei opțiuni cu JavaScript

Răspunsul #7

$('#aioConceptName option:selected').val();

Răspunsul #8

Cu JQuery:

1. Dacă vrei să obții textul opțiunii selectate, poți folosi $ (element select).text().

   var text = $('#aioConceptName option:selected').text();

2. Dacă vrei să obții valoarea opțiunii selectate, poți folosi $(select element).val().

   var val = $('#aioConceptName option:selected').val();

   Asigură-te că setezi atributul value în tagul <option>, astfel:

   <select id="aioConceptName">
     <option value="">choose io</option>
     <option value="roma(value)">roma(text)</option>
     <option value="totti(value)">totti(text)</option>
   </select>
   

Cu acest exemplu de cod HTML, presupunând că ultima opțiune este selectată:

1. var text vă va da totti(text)
2. var val vă va da totti(value)

$(document).on('change','#aioConceptName' ,function(){
  var val = $('#aioConceptName option:selected').val();
  var text = $('#aioConceptName option:selected').text();
  $('.result').text("Select Value = " + val);
  $('.result').append("<br>Select Text = " + text);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="aioConceptName">
 <option value="io(value)">choose io</option>
 <option value="roma(value)">roma(text)</option>
 <option value="totti(value)">totti(text)</option>
</select>

<p class="result"></p>

Răspunsul #9

Pentru o bună practică, trebuie să folosești val() pentru a obține valoarea opțiunilor selectate, nu text().

<label>Name</label>
<input type="text" name="name" />
<select id="aioConceptName">
    <option value="choose">choose io</option>
</select>

Poți folosi

   $("#aioConceptName").find(':selected').val();

Sau

   $("#aioConceptName :selected").val();

Răspuns #10

Citirea valorii (nu a textului) unui select:

var status = $("#Status").val();
var status = $("#Status")[0].value;
var status = $('#Status option:selected').val();

Cum să dezactivezi un select? în ambele variante, valoarea poate fi schimbată folosind:

A

Utilizatorul nu poate interacționa cu meniul derulant. Și nu știe ce alte opțiuni ar putea exista.

$('#Status').prop('disabled', true);

B

Utilizatorul poate vedea opțiunile din meniul derulant, dar toate sunt dezactivate:

$('#Status option').attr('disabled', true);

În acest caz, $ ("#Status").val() va funcționa doar pentru versiunile de jQuery mai mici de 1.9.0. Toate celelalte variante vor funcționa.

Cum să actualizezi un select dezactivat?

Din codul din spate poți totuși să actualizezi valoarea din selectul tău. Este dezactivat doar pentru utilizatori:

$("#Status").val(2);

În unele cazuri, s-ar putea să fie necesar să declanșați evenimente:

$("#Status").val(2).change();

Răspuns #11

ar trebui să folosești această sintaxă:

var value = $('#Id :selected').val();

Deci încearcă acest cod:

var values = $('#aioConceptName :selected').val();

poți testa în Fiddle: http://jsfiddle.net/PJT6r/9/

vezi despre acest răspuns în această postare

Răspunsul #12

Pentru a găsi selecțiile corecte cu jQuery, ia în considerare că în arborii HTML pot fi disponibile selecții multiple și pot confunda rezultatul așteptat.

(:selected).val() sau (:selected).text() nu vor funcționa corect pe opțiuni multiple selectate. Așa că păstrăm mai întâi un array cu toate selecțiile, așa cum ar putea face .map(), și apoi returnăm argumentul sau textul dorit.

Exemplul următor ilustrează aceste probleme și oferă o abordare mai bună

<select id="form-s" multiple="multiple">
    <option selected>city1</option>
    <option selected value="c2">city2</option>
    <option value="c3">city3</option>
</select>   
<select id="aioConceptName">
    <option value="s1" selected >choose io</option>
    <option value="s2">roma </option>
    <option value="s3">totti</option>
</select>
<select id="test">
    <option value="s4">paloma</option>
    <option value="s5" selected >foo</option>
    <option value="s6">bar</option>
</select>
<script>
$('select').change(function() {
    var a=$(':selected').text(); // "city1city2choose iofoo"
    var b=$(':selected').val();  // "city1" - selects just first query !
    //but..
    var c=$(':selected').map(function(){ // ["city1","city2","choose io","foo"]
        return $(this).text();
    }); 
    var d=$(':selected').map(function(){ // ["city1","c2","s1","s5"]
        return $(this).val();
    });
    console.log(a,b,c,d);
});
</script>

vedea diferitul rezultat predispus la erori în varianta a, b comparativ cu c & d care funcționează corect și păstrează toate selecțiile într-un tablou și apoi returnează ceea ce cauți.

Răspunsul #13

Folosind jQuery, adaugă doar un eveniment change și obține valoarea sau textul selectat în cadrul acelui handler.

Dacă aveți nevoie de text selectat, vă rugăm să folosiți acest cod:

$("#aioConceptName").change(function () {
    alert($("#aioConceptName :selected").text())
});

Sau dacă aveți nevoie de valoarea selectată, vă rugăm să folosiți acest cod:

$("#aioConceptName").change(function () {
    alert($("#aioConceptName :selected").attr('value'))
});

Răspunsul #14

Doar asta ar trebui să funcționeze:

var conceptName = $('#aioConceptName').val();

$(function() {
  $('#aioConceptName').on('change', function(event) {
    console.log(event.type + " event with:", $(this).val());
    $(this).prev('input').val($(this).val());
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Name</label>
<input type="text" name="name" />
<select id="aioConceptName">
  <option>choose io</option>
  <option>roma</option>
  <option>totti</option>
</select>

Răspuns #15

Pentru oricine a descoperit că cel mai bun răspuns nu funcționează.

Încearcă să folosești:

  $( "#aioConceptName option:selected" ).attr("value");

Funcționează pentru mine în proiectele recente, așa că merită să te uiți la el.

Răspunsul #16

Folosește funcția jQuery.val() și pentru elementele select:

Metoda .val() este utilizată în principal pentru a obține valorile elementelor de formular, cum ar fi input, select și textarea. În cazul elementelor select, aceasta returnează null atunci când nicio opțiune nu este selectată și un array care conține valoarea fiecărei opțiuni selectate atunci când există cel puțin una și este posibil să se selecteze mai multe, deoarece atributul multiple este prezent.

$(function() {
  $("#aioConceptName").on("change", function() {
    $("#debug").text($("#aioConceptName").val());
  }).trigger("change");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<select id="aioConceptName">
  <option>choose io</option>
  <option>roma</option>
  <option>totti</option>
</select>
<div id="debug"></div>

Răspuns #17

Direct și destul de ușor:

Dropdown-ul tău

<select id="aioConceptName">
    <option>choose io</option>
    <option>roma</option>
    <option>totti</option>
</select>

Cod Jquery pentru a obține valoarea selectată

$('#aioConceptName').change(function() {
    var $option = $(this).find('option:selected');

    //Added with the EDIT
    var value = $option.val(); //returns the value of the selected option.
    var text = $option.text(); //returns the text of the selected option.
});

Răspunsul #18

Pentru a obține valoarea etichetei selectate:

 $('#id_Of_Parent_Selected_Tag').find(":selected").val();

Și dacă vrei să obții textul, folosește acest cod:

 $('#id_Of_Parent_Selected_Tag').find(":selected").text();

De exemplu:

<div id="i_am_parent_of_select_tag">
<select>
        <option value="1">CR7</option>
        <option value="2">MESSI</option>
</select>
</div>


<script>
 $('#i_am_parent_of_select_tag').find(":selected").val();//OUTPUT:1 OR 2
 $('#i_am_parent_of_select_tag').find(":selected").text();//OUTPUT:CR7 OR MESSI
</script>