Question

Following is my code where I create a div with a adrop-down box on my page and I want an onClick event on the elements in the select :

$("div.projectTeamTools").html('Organize by Project Teams: <select id="projectTeams"><c:forEach var="projectTeam" items="${userProjectTeams}"><option value="${projectTeam.projectId}" onClick="javascript:onTeamSelect(this.value)">${projectTeam.projectName}</option></c:forEach></select>');

function onTeamSelect(teamId){
        alert(teamId +" Selected");
}

The code works fine on Firefox, but not on IE or Chrome.
Can anyone please help!

Answer 1

try this:

$("div.projectTeamTools").html('Organize by Project Teams: <select id="projectTeams"><c:forEach var="projectTeam" items="${userProjectTeams}"><option value="${projectTeam.projectId}" >${projectTeam.projectName}</option></c:forEach></select>');


    $("#projectTeams").change(function () {
        onTeamSelect($(this).val());
    });

function onTeamSelect(teamId){
        alert(teamId +" Selected");
}