Comment passer des paramètres sur onChange de html select
Je suis novice en JavaScript et jQuery. Je veux montrer un combobox-A, QUI EST UN HTML <select> avec son id sélectionné et son contenu à l'autre endroit sur onChange ().
Comment puis-je passer la liste déroulante complète avec son select id, et comment puis-je passer d'autres paramètres en feu de l'événement onChange?
9 réponses
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 obtient la valeur sélectionnée de la zone de liste déroulante dans OnChange événement.
Une autre approche qui peut être utile dans certaines situations, est de passer 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 savoir comment 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 tous les JavaScript ne sont pas jQuery. Vous devriez rechercher les différences et assurez-vous que vous utilisez celui approprié.
J'ai trouvé la réponse de @ Piyush utile, et juste pour y ajouter, si vous créez par programme un select, alors il y a un moyen important d'obtenir ce comportement qui peut ne pas être évident. Disons que vous avez une fonction et que vous créez 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 cet argument passé, donc à la place vous pouvez faire ceci:
newSelect.setAttribute('onchange', 'changeitem(this)');
Et vous pouvez définir le paramètre. Si vous le faites la première façon, ensuite, l'argument que vous obtiendrez à votre fonction onchange dépendra du navigateur. La deuxième façon semble fonctionner très bien entre les navigateurs.
Solution JQuery
Comment puis-je obtenir le texte de la valeur d'une option sélectionnée
Les éléments sélectionnés ont généralement deux valeurs auxquelles vous souhaitez accéder.
Tout d'abord, il y a la valeur à envoyer au serveur, ce qui est facile:
$( "#myselect" ).val();
// => 1
La seconde est la valeur de texte de la sélection.
Par exemple, en utilisant la case 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 simplement "1") vous feriez cela de la manière suivante:
$( "#myselect option:selected" ).text();
// => "Mr"
Voir aussi
Vous pouvez essayer le code ci-dessous
<select onchange="myfunction($(this).val())" id="myId">
</select>
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() );
});
Ce code une fois que j'écris pour expliquer simplement l'événement OnChange de select, vous pouvez enregistrer ce code en html et voir la sortie qui 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>
Sélectionnez une nouvelle voiture dans la liste. Lorsque vous sélectionnez une nouvelle voiture, une fonction est déclenchée qui affiche la valeur de la voiture sélectionnée.
<!DOCTYPE html>
<html>
<body>
<select id="mySelect" onchange="myFunction(this)">
<option value="Audi">Audi
<option value="BMW">BMW
<option value="Mercedes">Mercedes
<option value="Volvo">Volvo
</select>
<p id="demo"></p>
<script>
function myFunction(selectObject) {
var x = selectObject.value;
document.getElementById("demo").innerHTML = "You selected: " + x;
}
</script>
</body>
</html>Tableau JavaScript, pour chaque boucle et OnChange Sélectionnez
<!DOCTYPE html>
<html>
<body>
<p id="select"></p>
<script>
var txt = "";
var person = {id1:"John", id2:"Doe", id3:"John Doe"};
var x;
text = "<select id='mySelect' onchange='myFunction()'>";
for (x in person) {
text += "<option value='" + x + "'>" + person[x] + "</option>";
}
text += "</select>";
document.getElementById("select").innerHTML = text;
</script>
<p id="text"></p>
<script>
function myFunction() {
var x = document.getElementById("mySelect").value;
document.getElementById("text").innerHTML = "You selected: " + x + " as value";
}
</script>
</body>
</html>