Below is the JavaScript code I am using:
$(document).ready(function() {
$.getJSON("Stations.php", function(jsonData){
$.each(jsonData, function(key,value) {
$('#selectStation')
.append($("<option></option>")
.attr("value",key)
.text(value.name));
});
});
});
function sta_callStation(sel){
$('#noOfPassengers, #infoOfPassengers, #distType,#distParams').empty();
$('#sta_numberOfIcons').empty();
$.getJSON('Stations.php', function(station){
$.each(station, function(sta_key, sta_value) {
if(sel.value==sta_key)
{
$.each(sta_value.passengers, function(j,passengers)
{
//$('#sta_numberOfIcons').append('<i class="icon-user" ></i>');
var pas_icon = document.createElement("a");
pas_icon.className = "icon-user";
pas_icon.id='id_'+(j);
pas_icon.setAttribute('href', '#');
pas_icon.setAttribute('rel', 'popover');
//alert('id_'+(j));
document.getElementById('sta_numberOfIcons').appendChild(pas_icon);
});
}
});
});
}
Here is the HTML part related to the stations:
Stations
<select name="selectStation" id="selectStation" onchange="sta_callStation(this);">
</select>
Initially, when the page loads, the combobox is populated with options for Station 1, Station 2, and so on. When a station is selected (represented by values from 1 to 5), the sta_callStation function is triggered. This function dynamically creates person icons with unique IDs like id_1, id_2, etc. How can I activate these icons on mouseover? Should I use classes or IDs for this interaction? Before selecting a station: https://docs.google.com/file/d/0B1RbKsJ4B8eoeW5wdWhLQW85QTQ/edit?usp=sharing After choosing a station and having random passengers generated in PHP: https://docs.google.com/file/d/0B1RbKsJ4B8eoQmYwWVpYbno2NnM/edit?usp=sharing