Skip to content

Instantly share code, notes, and snippets.

@fahdi

fahdi/jscode_for_json.js

Last active December 28, 2015 19:49
Show Gist options
  • Save fahdi/7553465 to your computer and use it in GitHub Desktop.
Save fahdi/7553465 to your computer and use it in GitHub Desktop.
Download ZIP
Update HTML drop down with data from a JSON variable parsed inline with JSON.parse.
Raw
jscode_for_json.js
jQuery(function($) {
$("#btnUpdate").click(function() {
data=JSON.parse('{ "options": [ {"value": "New1", "text": "New Option 1"}, {"value": "New2", "text": "New Option 2"}, {"value": "New3", "text": "New Option 3"} ] }');
var options, index, select, option;
// Get the raw DOM object for the select box
select = document.getElementById('theSelect');
// Clear the old options
select.options.length = 0;
// Load the new options
options = data.options;
for (index = 0; index < options.length; ++index) {
option = options[index];
select.options.add(new Option(option.text, option.value));
}
});
});
Raw
update_dropdown_with_json.html
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Test Page</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
body {
font-family: sans-serif;
}
p {
margin: 0px;
}
</style>
</head>
<body>
<input type='button' id='btnUpdate' value='Click to Update'>
<select id='theSelect'>
<option>Old Option</option>
</select>
<script src="jscode_for_json.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment