What would be the best way to have preloaded data in html and then used with javascript. I do not want to use variables in javascript or save an ajax query.
It may be an XML data into a hidden div? .
Example:
1; Europe
2; Latin America
------------------
2, 1, Argentina
2, 2; Brazil
2, 3, Chile
1, 4, France
1, 5, Spain
1, 6; Italy
He would have to load the data into a select depending on the country you select. are much data and need to be fast, I prefer to have it preloaded.
EDIT. Solution, based on the proposed solutions:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<title></title>
<script type="text/javascript">
$(function(){
$_save_data = $("<div>");
$("#xselect optgroup").appendTo($_save_data);
$("#buttonAddA").click(function(){
$("#xselect").empty();
$_save_data.find("optgroup[id='a'] option").clone().appendTo("#xselect");
});
$("#buttonAddB").click(function(){
$("#xselect").empty();
$_save_data.find("optgroup[id='b'] option").clone().appendTo("#xselect");
});
});
</script>
</head>
<body>
<button id="buttonAddA">Add A</button>
<button id="buttonAddB">Add B</button>
<select id="xselect">
<optgroup id="a">
<option>a1</option>
<option>a2</option>
<option>a3</option>
<option>a4</option>
<option>a5</option>
</optgroup>
<optgroup id="b">
<option>b1</option>
<option>b2</option>
<option>b3</option>
<option>b4</option>
<option>b5</option>
</optgroup>
<optgroup id="c">
<option>c1</option>
<option>c2</option>
<option>c3</option>
<option>c4</option>
<option>c5</option>
</optgroup>
</select>
</body>
</html>
I’ve done the opposite thing in my project – I loaded full select, and then saved it’s content with JavaScript and only inserted what I wanted. That way users without JavaScript (or users waiting for JavaScript to load) can use my form.