web-dev-qa-db-fra.com

evénement de changement jQuery dans la liste déroulante

Je viens d'ajouter la requête lib à mon application Web et de le tester avec une simple alerte:

<script src="<c:url value="/resources/jquery-1.10.2.min.js" />"></script>
<script type="text/javascript">
            $(function(){
                alert('jquery is working');
            }); 
</script>

Et fonctionne bien. Cependant, lorsque je souhaite implémenter un événement "change" dans ma liste déroulante

<script src="<c:url value="/resources/jquery-1.10.2.min.js" />"></script>
<script type="text/javascript">
        $("#projectKey").change(function() {
            alert($('option:selected', $(this)).text());
        });
</script>

il ne me montre aucune alerte, fondamentalement rien ne se passe. Ma liste déroulante est la suivante: 

<select id="projectKey" name="projectKey">
    <option value="AM">AM</option>
    <option value="AIL">AIL</option>
    <option value="NEB">NEB</option>
    <option value="SSP">SSP</option>
</select>

Bien sûr, j'ai essayé de simplifier le javascript, juste o avoir 

$("#projectKey").change(function() {
            alert("test");
});

mais toujours pas de joie. Ce sera quelque chose avec le sélecteur ou le menu déroulant. Essayé aussi "select # projectKey" mais le résultat était bien sûr le même. Une idée de ce que je fais mal?

javascriptjqueryjsp
6
shippi

Vous auriez dû garder cette fonction DOM Ready

$(function() {
    $("#projectKey").change(function() {
        alert( $('option:selected', this).text() );
    });
});

Le document n'est pas prêt si vous avez ajouté le javascript avant les éléments dans le DOM, vous devez utiliser une fonction DOM ready ou ajouter le javascript après les éléments, l'emplacement habituel étant juste avant la balise </body>

28
adeneo

Veuillez modifier votre fonction javascript comme ci-dessous ....

$(function () {
        $("#projectKey").change(function () {
            alert($('option:selected').text());
        });
    });

Vous n'avez pas besoin d'utiliser $(this) dans alert.

2
Vishal Patel

Ou vous pouvez utiliser ce javascript 

$(function () {
    $("#projectKey").change(function () {
        alert($('#projectKey option:selected').text());
    });
});
1
milan kyada

Le html

<select id="drop"  name="company" class="company btn btn-outline   dropdown-toggle" >
   <option value="demo1">Group Medical</option>
   <option value="demo">Motor Insurance</option>
</select>

Script.js

$("#drop").change(function () {                            
   var category= $('select[name=company]').val() // Here we can get the value of selected item
   alert(category); 
});
0
Gopakumar AP