Comment puis-je obtenir la valeur sélectionnée d'une liste déroulante à l'aide de jQuery?
J'ai essayé d'utiliser
var value = $('#dropDownId').val();
et
var value = $('select#dropDownId option:selected').val();
mais les deux retournent une chaîne vide.
Pour les éléments dom sélectionnés, pour obtenir la valeur actuellement sélectionnée:
$('#dropDownId').val();
Pour obtenir le texte actuellement sélectionné:
$('#dropDownId :selected').text();
var value = $('#dropDownId:selected').text()
Devrait bien fonctionner, voir cet exemple:
$(document).ready(function(){
$('#button1').click(function(){
alert($('#combo :selected').text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="combo">
<option value="1">Test 1</option>
<option value="2">Test 2</option>
</select>
<input id="button1" type="button" value="Click!" />
Essayez cette jQuery,
$("#ddlid option:selected").text();
ou ce javascript,
var selID=document.getElementById("ddlid");
var text=selID.options[selID.selectedIndex].text;
Si vous devez accéder à la valeur et non au texte, essayez d'utiliser la méthode val()
au lieu de text()
.
Consultez les liens ci-dessous pour le violon.
essaye ça
$("#yourDropdown option:selected").text();
Je sais que c'est un article terriblement ancien et que je devrais probablement être fouetté pour cette pitoyable résurrection, mais je pensais partager quelques extraits très utiles de JS que j'utilise dans toutes les applications de mon arsenal ...
Si vous tapez:
$("#selector option:selected").val() // or
$("#selector option:selected").text()
vieillit, essayez d’ajouter ces petites bribes à votre fichier global *.js
:
function soval(a) {
return $('option:selected', a).val();
}
function sotext(a) {
return $('option:selected', a).text();
}
et écrivez simplement soval("#selector");
ou sotext("#selector");
à la place! Obtenez encore plus de fantaisie en combinant les deux et en retournant un objet contenant à la fois value
et text
!
function so(a) {
my.value = $('option:selected', a).val();
my.text = $('option:selected', a).text();
return my;
}
Cela me fait gagner un temps précieux, en particulier pour les applications lourdes de formes!
Cela alertera la valeur sélectionnée . Code JQuery ...
$(document).ready(function () {
$("#myDropDown").change(function (event) {
alert("You have Selected :: "+$(this).val());
});
});
Code HTML...
<select id="myDropDown">
<option>Milk</option>
<option>Egg</option>
<option>Bread</option>
<option>Fruits</option>
</select>
Encore un autre exemple testé:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$('#bonus').change(function() {
alert($("#bonus option:selected").text());
});
});
</script>
</head>
<body>
<select id="bonus">
<option value="1">-$5000</option>
<option value="2">-$2500</option>
<option value="3">$0</option>
<option value="4">$1</option>
<option value="5">We really appreciate your work</option>
</select>
</body>
</html>
Ça fera l'affaire
$('#dropDownId').val();
Pour le texte sélectionné, utilisez:
value: $('#dropDownId :selected').text();
Pour la valeur sélectionnée, utilisez:
value: $('#dropDownId').val();
Avez-vous fourni à votre élément de sélection un identifiant?
<select id='dropDownId'> ...
Votre première déclaration devrait fonctionner!
utilisation
$('#dropDownId').find('option:selected').val()
Cela devrait marcher :)
Ou si vous voulez essayer:
$("#foo").find("select[name=bar]").val();
Je l'ai utilisé aujourd'hui et cela fonctionne bien.
La id
qui a été générée pour votre contrôle déroulant dans la html
sera dynamique. Donc, utilisez l'identifiant complet $('ct100_<Your control id>').val().
Cela fonctionnera.
Pour obtenir la valeur de jquery du menu déroulant, utilisez simplement la fonction ci-dessous qui vient d’être envoyée id
et obtenez la valeur sélectionnée:
function getValue(id){
var value = "";
if($('#'+id)[0]!=undefined && $('#'+id)[0]!=null){
for(var i=0;i<$('#'+id)[0].length;i++){
if($('#'+id)[0][i].selected == true){
if(value != ""){
value = value + ", ";
}
value = value + $('#'+id)[0][i].innerText;
}
}
}
return value;
}
function fundrp(){
var text_value = $("#drpboxid option:selected").text();
console.log(text_value);
var val_text = $("#drpboxid option:selected").val();
console.log(val_text);
var value_text = $("#drpboxid option:selected").attr("vlaue") ;
console.log(value_text);
var get_att_value = $("#drpboxid option:selected").attr("id")
console.log(get_att_value);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<select id="drpboxid">
<option id="1_one" vlaue="one">one</option>
<option id="2_two" vlaue="two">two</option>
<option id="3_three" vlaue="three">three</option>
</select>
<button id="btndrp" onclick="fundrp()">Tracking Report1234</button>
C'est ce qui fonctionne
var value= $('option:selected', $('#dropDownId')).val();
$("#selector <b>></b> option:selected").val()
Ou
$("#selector <b>></b> option:selected").text()
Les codes ci-dessus ont bien fonctionné pour moi
Je sais que c'est vieux mais je pense que je le mets à jour avec une réponse plus actualisée
$( document ).on( 'change', '#combo', function () {
var prepMin= $("#combo option:selected").val();
alert(prepMin);
});
J'espère que ça aide
utiliser l'un ou l'autre de ces codes
$('#dropDownId :selected').text();
OR
$('#dropDownId').text();
$("select[id$=dropDownId]").val()
Vous devez mettre comme ça.
$('[id$=dropDownId] option:selected').val();
Vous pouvez utiliser n'importe lequel de ceux-ci:
$(document).on('change', 'select#dropDownId', function(){
var value = $('select#dropDownId option:selected').text();
//OR
var value = $(this).val();
});
Vous pouvez le faire en utilisant le code suivant.
$('#dropDownId').val();
Si vous souhaitez obtenir la valeur sélectionnée parmi les options de la liste de sélection. Ça fera l'affaire.
$('#dropDownId option:selected').text();
HTML:
<select class="form-control" id="SecondSelect">
<option>5<option>
<option>10<option>
<option>20<option>
<option>30<option>
</select>
JavaScript:
var value = $('#SecondSelect')[0].value;
Si vous avez plus d'un menu déroulant, essayez:
HTML:
<select id="dropdown1" onchange="myFunction(this)">
<option value='...'>Option1
<option value='...'>Option2
</select>
<select id="dropdown2" onchange="myFunction(this)">
<option value='...'>Option1
<option value='...'>Option2
</select>
JavaScript:
function myFunction(sel) {
var selected = sel.value;
}
Utilisez la méthode ci-dessous pour obtenir la valeur sélectionnée au chargement de la page:
$(document).ready(function () {
$('#ddlid').on('change', function () {
var value = $('#ddlid :selected').text();
alert(value);`
});
});
Essaye ça:
$('#dropDownId option').filter(':selected').text();
$('#dropDownId option').filter(':selected').val();