I went through this fiddle which have a sample of three dropdown with json data. I have a sample google spreadsheet here. Now is it possible to render this spreadsheet data to the example given at fiddle as json format. I know we can convert the spreadsheet to json as,
var query = new google.visualization.Query('http://spreadsheets.google.com/tq?key=0AozvCNI02VmpdDkwR3RETmczbTI4ZFJhTXJkZHlUbEE#gid=0');
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
data = response.getDataTable();
}
But using this the dropdown didn't works.
I'm not sure about the way you're doing it but it can be accomplished a different way. Please see this fiddle using your example data, and below for the code.
Basically you call the JSON data from your spreadsheet with the below HTML script tags.
<script src="http://spreadsheets.google.com/feeds/list/0An1-zUNFyMVLdEFEdVV3N2h1SUJOdTdKQXBfbGpNTGc/1/public/values?alt=json-in-script&callback=importGSS"></script>
Please note I'm linking to a copy of your spreadsheet as it requires it to by published
Then the you can handle the data with the below script.
function importGSS(json){
for(var i = 0; i < json.feed.entry.length; i++){
var entry = json.feed.entry[i];
$('#departments').append('<option>' + entry.gsx$subdivision.$t + '</option>');
$('#subject').append('<option>' + entry.gsx$section.$t + '</option>');
$('#services').append('<option>' + entry.gsx$station.$t + '</option>');
}
}
You can obviously adapt to your own needs.