Menu
Hello,
I would like to ask you dear helpers how can I make not only selectbox with ajax content changing but also this content should be loaded from JSON.
I have
<code>
<form id=”id3″ method=”post” action=””><div><input type=”hidden” name=”” id=””></div>
<p>option</p>
<select name=”cID”>
<option selected=”selected” value=””>— out from choice —</option>
<optgroup id=”idx”>
</optgroup>
</select>
<div><input id=”button” type=”submit” value=”search”></div>
</form>
<div id=”content”></div>
<script type=”text/javascript”>
$select = $(‘#idx’);
$.ajax({
url: ‘jsonfile.json’,
dataType:’JSON’,
success:function(data){
$select.html(”);
$.each(data.stations, function(key, val){
$select.append(‘<option id=”‘ + val.cID + ‘”>’ + val.cN + ‘</option>’);
})
},
error:function(){
$select.html(‘<option id=”-1″>none available</option>’);
}
});
$(‘#id5’).bind(‘change’, function() {
var selectbox = $(‘#id5’).val();
var myExp = new RegExp(selectbox, “i”);
$.getJSON(‘../../sys/ws/timetables.json’, function(data) {
var output = ‘<ul>’;
$.each(data, function(key, val) {
if (val.stationId.search(myExp) != -1) {
output += ‘<li>’;
output += ‘<h2>’+ val.stationId +'</h2>’;
output += ‘<p>’+ val.stationName +'</p>’;
output += ‘</li>’;
} else {
return console.log(“Error in ajax”);
}
});
output += ‘</ul>’;
$(‘#content’).html(output);
});
});
</script>
</code>
Thank you very much.
Greetings, maestorm.