jQuery Geselecteerde optie ophalen uit dropdown

Meestal gebruik ik $("#id").val()om de waarde van de geselecteerde optie te retourneren, maar deze keer werkt het niet.
De geselecteerde tag heeft de id aioConceptName

html-code

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

Antwoord 1, autoriteit 100%

Voor dropdown-opties wil je waarschijnlijk zoiets als dit:

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

De reden waarom val()niet werkt, is omdat het klikken op een optie de waarde van de vervolgkeuzelijst niet verandert – het voegt alleen de :selectedtoe eigenschap toe aan de geselecteerde optie die een onderliggendis van de vervolgkeuzelijst.


Antwoord 2, autoriteit 18%

Stel de waarden in voor elk van de opties

<select id="aioConceptName">
    <option value="0">choose io</option>
    <option value="1">roma</option>
    <option value="2">totti</option>
</select>

$('#aioConceptName').val()werkte niet omdat .val()het kenmerk valueretourneert. Om het goed te laten werken, moeten de value-attributen worden ingesteld op elke <option>.

Nu kun je $('#aioConceptName').val()aanroepen in plaats van dat al deze :selectedvoodoo wordt voorgesteld door anderen.


Antwoord 3, autoriteit 9%

Ik stuitte op deze vraag en ontwikkelde een beknoptere versie van het antwoord van Elliot BOnneville:

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

of algemeen:

$('#id :pseudoclass')

Dit bespaart je een extra jQuery-oproep, selecteert alles in één keer en is duidelijker (mijn mening).


Antwoord 4, autoriteit 3%

Probeer dit voor waarde…

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

of dit voor tekst…

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

Antwoord 5, autoriteit 3%

Als u zich in de gebeurteniscontext bevindt, kunt u in jQuery het geselecteerde optie-element ophalen met :
$(this).find('option:selected')als volgt:

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

Bewerken

Zoals vermeld door PossessWithin, is mijn antwoord gewoon antwoord op de vraag: Hoe de geselecteerde “Optie” te selecteren.

Gebruik vervolgens option.val()om de optiewaarde te krijgen.


Antwoord 6, autoriteit 2%

Heb je overwogen om gewoon oud javascript te gebruiken?

var box = document.getElementById('aioConceptName');
conceptName = box.options[box.selectedIndex].text;

Zie ook Een optietekst/waarde verkrijgen met JavaScript


Antwoord 7

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

Antwoord 8

De waarde (niet de tekst) van een select lezen:

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

Hoe kan ik een selectie uitschakelen?
in beide varianten kan de waarde worden gewijzigd met:

A

Gebruiker kan niet communiceren met de vervolgkeuzelijst. En hij weet niet welke andere opties er zijn.

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

B

De gebruiker kan de opties in de vervolgkeuzelijst zien, maar ze zijn allemaal uitgeschakeld:

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

In dit geval werkt $("#Status").val()alleenvoor jQuery-versies kleiner dan 1.9.0. Alle andere varianten zullen werken.

Hoe een uitgeschakelde selectie bijwerken?

Van achter de code kun je nog steeds de waarde in je selectie bijwerken. Het is alleen uitgeschakeld voor gebruikers:

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

In sommige gevallen moet u mogelijk gebeurtenissen ontslaan:

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

Antwoord 9

u moet deze syntaxis gebruiken:

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

Dus probeer deze code:

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

u kunt testen in Fiddle: http://jsfiddle.net/PJT6r/9/

zie over dit antwoord in dit bericht


Antwoord 10

<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>

Antwoord 11

Gebruik jQuery, voeg gewoon een change-gebeurtenis toe en krijg de geselecteerde waarde of tekst binnen die handler.

Als je geselecteerde tekst nodig hebt, gebruik dan deze code:

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

Of als je een geselecteerde waarde nodig hebt, gebruik dan deze code:

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

Antwoord 12

Gebruik de functie jQuery.val()ook voor bepaalde elementen:

De .val() methode wordt voornamelijk gebruikt om de waarden van formulierelementen te krijgen
zoals invoer, selecteren en tekstgebied. In het geval van geselecteerde elementen is het
geeft nullterug als er geen optie is geselecteerd en een array met de
waarde van elke geselecteerde optie wanneer er ten minste één is en het is
mogelijk om meer te selecteren omdat het kenmerk multipleaanwezig is.

$(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>

Antwoord 13

Voor iedereen die erachter kwam dat het beste antwoord niet werkt.

Probeer te gebruiken:

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

Werkt voor mij in recente projecten, dus het is de moeite waard om ernaar te kijken.


Antwoord 14

Direct en vrij eenvoudig:

Uw vervolgkeuzelijst

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

Jquery-code om de geselecteerde waarde te krijgen

$('#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.
});

Antwoord 15

Voor het verkrijgen van waardevan geselecteerde tag:

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

En als je tekstwilt ontvangen, gebruik dan deze code:

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

Bijvoorbeeld:

<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>

Antwoord 16

Voor een goede gewoonte moet je val()gebruiken om de waarde van geselecteerde opties te krijgen, niet text().

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

U kunt gebruiken

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

Of

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

Ik wou dat dat helpt ..


Antwoord 17

Alleen dit zou moeten werken:

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

Antwoord 18

Je kunt het op deze manier proberen te debuggen:

console.log($('#aioConceptName option:selected').val())

Antwoord 19

Ik hoop dat dit ook helpt om het beter te begrijpen en helpt
probeer dit hieronder,

$('select[id="aioConceptName[]"] option:selected').each(function(key,value){
   options2[$(this).val()] = $(this).text();
   console.log(JSON.stringify(options2));
});

voor meer details alstublieft
http://www.drtuts .com/get-value-multi-select-dropdown-without-value-attribute-using-jquery/


Antwoord 20

Als u het kenmerk ‘waarde’ wilt gebruiken in plaats van het tekstknooppunt, werkt dit voor u:

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

Antwoord 21

Hier is de eenvoudige oplossing voor dit probleem.

$("select#aioConceptName").change(function () {
           var selectedaioConceptName = $('#aioConceptName').find(":selected").val();;
           console.log(selectedaioConceptName);
        });

Antwoord 22

probeer dit eens

$(document).ready(function() {
    $("#name option").filter(function() {
        return $(this).val() == $("#firstname").val();
    }).attr('selected', true);
    $("#name").live("change", function() {
        $("#firstname").val($(this).find("option:selected").attr("value"));
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<select id="name" name="name"> 
<option value="">Please select...</option> 
<option value="Elvis">Elvis</option> 
<option value="Frank">Frank</option> 
<option value="Jim">Jim</option> 
</select>
<input type="text" id="firstname" name="firstname" value="Elvis" readonly="readonly">

Antwoord 23

$('nameofDropDownList').prop('selectedIndex', whateverNumberasInt);

Stel je de DDL voor als een array met indexen, je selecteert één index. Kies degene waarop je het wilt instellen met je JS.


Antwoord 24

U kunt $("#drpList").val();

gebruiken


Antwoord 25

om een select met dezelfde class= naam op te halen, kunt u dit doen, om te controleren of een select-optie is geselecteerd.

var bOK = true;
$('.optKategorien').each(function(index,el){
    if($(el).find(":selected").text() == "") {
        bOK = false;
    }
});

Antwoord 26

Ik had hetzelfde probleem en kwam erachter waarom het niet werkte in mijn geval
De html-pagina was opgedeeld in verschillende html-fragmenten en ik ontdekte dat ik een ander invoerveld heb met dezelfde ID van de select, waardoor de val()altijd is leeg
Ik hoop dat dit de dag redt voor iedereen die een soortgelijk probleem heeft.


Antwoord 27

Probeer

aioConceptName.selectedOptions[0].value

Antwoord 28

Er is maar één juiste manier om de geselecteerde optie te vinden – door optionvalueattribuut. Dus neem de eenvoudige code:

//find selected option
$select = $("#mySelect");
$selectedOption = $select.find( "option[value=" + $select.val() + "]" );
//get selected option text
console.log( $selectedOption.text() );

Dus als je een lijst als deze hebt:

<select id="#mySelect" >
  <option value="value1" >First option</option>
  <option value="value2" >Second option</option>
  <option value="value3" selected >Third option</option>
</select>

Als u het kenmerk selectedgebruikt voor option, dan geeft find(":selected")een onjuist resultaat omdat selected-attribuut blijft voor altijd bij option, zelfs als de gebruiker een andere optie selecteert.

Zelfs als de gebruiker de eerste of tweede optie selecteert, geeft het resultaat van $(“select option:selected”) twee elementen! Dus $(“select :selected”).text() geeft een resultaat als “Eerste optie Derde optie

Gebruik dus de valuekenmerkselector en vergeet niet het valuekenmerk in te stellen voor alle opties!


Antwoord 29

Waarschijnlijk is uw beste gok in dit soort scenario’s om jQuery’s wijzigingsmethodete gebruiken om de momenteel geselecteerde waarde, zoals:

$('#aioConceptName').change(function(){
   //get the selected val using jQuery's 'this' method and assign to a var
   var selectedVal = $(this).val();
   //perform the rest of your operations using aforementioned var
});

Ik geef de voorkeur aan deze methode omdat je dan functies kunt uitvoeren voor elke geselecteerde optie in een bepaald selectieveld.

Hopelijk helpt dat!


Antwoord 30

Normaal gesproken moet u niet alleen de geselecteerde waarde ophalen, maar ook een actie uitvoeren. Dus waarom niet alle jQuery-magie vermijden en de geselecteerde waarde gewoon als argument doorgeven aan de actieaanroep?

<select onchange="your_action(this.value)">
   <option value='*'>All</option>
   <option ... />
</select>

Other episodes