Comment passer des paramètres sur onChange of html select
Je suis novice chez JavaScript et jQuery. Je veux montrer un combobox-A, qui est un HTML <select> avec sa id sélectionnée et son contenu à l'autre endroit sur onChange ().
Comment puis-je transmettre la liste déroulante complète avec sa sélection id et comment puis-je transmettre d'autres paramètres lors du déclenchement de l'événement onChange?
function getComboA(selectObject) {
var value = selectObject.value;
}
<select id="comboA" onchange="getComboA(this)">
<option value="">Select combo</option>
<option value="Value1">Text1</option>
<option value="Value2">Text2</option>
<option value="Value3">Text3</option>
</select>
L'exemple ci-dessus vous permet d'obtenir la valeur sélectionnée de la liste déroulante sur OnChange event.
Une autre approche qui peut être pratique dans certaines situations consiste à transmettre la valeur du <option /> sélectionné directement à la fonction comme ceci:
<select onChange="myFunction(this.options[this.selectedIndex].value)">
<option value="1">Text 1</option>
<option value="2">Text 2</option>
</select>
Pour le faire dans jQuery:
<select id="yourid">
<option value="Value 1">Text 1</option>
<option value="Value 2">Text 2</option>
</select>
<script src="jquery.js"></script>
<script>
$('#yourid').change(function() {
alert('The option with value ' + $(this).val() + ' and text ' + $(this).text() + ' was selected.');
});
</script>
Vous devez également savoir que Javascript et jQuery ne sont pas identiques. jQuery est un code JavaScript valide, mais tout le JavaScript n'est pas jQuery. Vous devriez rechercher les différences et vous assurer que vous utilisez celle qui convient.
J'ai trouvé la réponse de @ Piyush utile et, pour ajouter à cela, si vous créez par programme une sélection, il existe un moyen important d'obtenir ce comportement qui peut ne pas être évident. Supposons que vous ayez une fonction et que vous créiez une nouvelle sélection:
var changeitem = function (sel) {
console.log(sel.selectedIndex);
}
var newSelect = document.createElement('select');
newSelect.id = 'newselect';
Le comportement normal peut être de dire
newSelect.onchange = changeitem;
Mais cela ne vous permet pas vraiment de spécifier l'argument passé, vous pouvez donc faire ceci:
newSelect.setAttribute('onchange', 'changeitem(this)');
Et vous pouvez définir le paramètre. Si vous le faites de la première façon, l'argument que vous obtiendrez dans votre fonction onchange dépendra du navigateur. La deuxième façon semble fonctionner très bien entre navigateurs.
solution jQuery
Comment puis-je obtenir la valeur textuelle d'une option sélectionnée
Les éléments sélectionnés ont généralement deux valeurs auxquelles vous souhaitez accéder.
Il y a d'abord le value à envoyer au serveur, ce qui est simple:
$( "#myselect" ).val();
// => 1
La seconde est la valeur text de la sélection.
Par exemple, en utilisant la boîte de sélection suivante:
<select id="myselect">
<option value="1">Mr</option>
<option value="2">Mrs</option>
<option value="3">Ms</option>
<option value="4">Dr</option>
<option value="5">Prof</option>
</select>
Si vous voulez obtenir la chaîne "Mr" si la première option a été sélectionnée (au lieu de "1"), vous le feriez de la manière suivante:
$( "#myselect option:selected" ).text();
// => "Mr"
Voir également
Ceci est aidé pour moi.
Pour sélectionner:
$('select_tags').on('change', function() {
alert( $(this).find(":selected").val() );
});
Pour radio/case à cocher:
$('radio_tags').on('change', function() {
alert( $(this).find(":checked").val() );
});
Vous pouvez essayer le code ci-dessous
<select onchange="myfunction($(this).val())" id="myId">
</select>
Cela a fonctionné pour moi onchange = "setLocation ($ (this) .val ())"
Ici..
@ Html.DropDownList ("Demo", nouveau SelectList (ViewBag.locs, "Valeur", "Texte"), nouveau {Class = "ddlStyle", onchange = "setLocation ($ (this) .val ())" ;
ce code une fois que j'écris pour juste expliquer l'événement onChange de select, vous pouvez enregistrer ce code en tant que HTML et voir la sortie il fonctionne.et facile à comprendre pour vous.
<html>
<head>
<title>Register</title>
</head>
<body>
<script>
function show(){
var option = document.getElementById("category").value;
if(option == "Student")
{
document.getElementById("enroll1").style.display="block";
}
if(option == "Parents")
{
document.getElementById("enroll1").style.display="none";
}
if(option == "Guardians")
{
document.getElementById("enroll1").style.display="none";
}
}
</script>
<form action="#" method="post">
<table>
<tr>
<td><label>Name </label></td>
<td><input type="text" id="name" size=20 maxlength=20 value=""></td>
</tr>
<tr style="display:block;" id="enroll1">
<td><label>Enrollment No. </label></td>
<td><input type="number" id="enroll" style="display:block;" size=20 maxlength=12 value=""></td>
</tr>
<tr>
<td><label>Email </label></td>
<td><input type="email" id="emailadd" size=20 maxlength=25 value=""></td>
</tr>
<tr>
<td><label>Mobile No. </label></td>
<td><input type="number" id="mobile" size=20 maxlength=10 value=""></td>
</tr>
<tr>
<td><label>Address</label></td>
<td><textarea rows="2" cols="20"></textarea></td>
</tr>
<tr >
<td><label>Category</label></td>
<td><select id="category" onchange="show()"> <!--onchange show methos is call-->
<option value="Student">Student</option>
<option value="Parents">Parents</option>
<option value="Guardians">Guardians</option>
</select>
</td>
</tr>
</table><br/>
<input type="submit" value="Sign Up">
</form>
</body>
</html>
Solution JavaScript
<select id="comboA">
<option value="">Select combo</option>
<option value="Value1">Text1</option>
<option value="Value2">Text2</option>
<option value="Value3">Text3</option>
</select>
<script>
document.getElementById("comboA").onchange = function(){
var value = document.getElementById("comboA").value;
};
</script>
ou
<script>
document.getElementById("comboA").onchange = function(evt){
var value = evt.target.value;
};
</script>
ou
<script>
document.getElementById("comboA").onchange = handleChange;
function handleChange(evt){
var value = evt.target.value;
};
</script>