Je suis novice chez JavaScript et jQuery. Je veux montrer un combobox-A, qui est un HTML <select>avec son sélectionnéid et son contenu à l'autre endroit sur onChange ().

Comment puis-je passer la liste déroulante complète avec sa sélection id, et comment puis-je passer d'autres paramètres en feu de l'événement onChange?

function getComboA(selectObject) {
  var value = selectObject.value;  
  console.log(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 lors d'un événement OnChange .

Une autre approche qui peut être pratique dans certaines situations consiste à transmettre <option />directement la valeur de l'élément sélectionné à la fonction comme ceci:

function myFunction(chosen) {
  console.log(chosen);
}

<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 tout JavaScript n'est pas jQuery. Vous devez rechercher les différences et vous assurer que vous utilisez celui qui convient.

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>

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. 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é, vous pouvez donc le faire à la place:

newSelect.setAttribute('onchange', 'changeitem(this)');

Et vous pouvez définir le paramètre. Si vous le faites de la première manière, l'argument que vous obtiendrez à votre onchangefonction dépendra du navigateur. La deuxième façon semble fonctionner très bien entre les navigateurs.

Solution jQuery

Comment obtenir la valeur texte d'une option sélectionnée

Les éléments de sélection ont généralement deux valeurs auxquelles vous souhaitez accéder.
Il y a d'abord la valeur à envoyer au serveur, ce qui est simple:

$( "#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 vouliez obtenir la chaîne "Mr" si la première option était sélectionnée (au lieu de "1"), vous le feriez de la manière suivante:

$( "#myselect option:selected" ).text();
// => "Mr"  

Voir également

• .val () Documentation de l'API jQuery

Cela m'a aidé.

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>

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

Au cas où quelqu'un chercherait une solution React sans avoir à télécharger des dépendances supplémentaires, vous pourriez écrire:

<select onChange={this.changed(this)}>
   <option value="Apple">Apple</option>
   <option value="Android">Android</option>                
</select>

changed(){
  return e => {
    console.log(e.target.value)
  }
}

Assurez-vous de lier la fonction changé () dans le constructeur comme:

this.changed = this.changed.bind(this);

Cela a fonctionné pour moi onchange = setLocation($(this).val())

Ici.

    @Html.DropDownList("Demo", 
new SelectList(ViewBag.locs, "Value", "Text"), 
new { Class = "ddlStyle", onchange = "setLocation($(this).val())" });