Question

在html中预加载数据然后与javascript一起使用的最佳方法是什么？我不想在javascript中使用变量或保存ajax查询。

它可能是一个隐藏div的XML数据？

示例：

1; Europe
2; Latin America

------------------

2, 1, Argentina
2, 2; Brazil
2, 3, Chile
1, 4, France
1, 5, Spain
1, 6; Italy

他必须根据您选择的国家/地区将数据加载到选择中。是很多数据，需要快速，我更喜欢预装。

修改。解决方案，基于提出的解决方案：

<!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>

Answer 1

我在我的项目中做了相反的事情 - 我加载了完整的选择，然后用JavaScript保存了它的内容，只插入了我想要的内容。这样，没有JavaScript的用户（或等待加载JavaScript的用户）可以使用我的表单。

Answer 2

我不建议这样做，但如果您没有其他选择：您可以使用以下HTML：

<!-- header above this line -->
<div id="data" style="display:none">
  1; Europe
  2; Latin America

  ------------------

  2, 1, Argentina
  2, 2; Brazil
  2, 3, Chile
  1, 4, France
  1, 5, Spain
  1, 6; Italy
</div>
<!-- footer below this line -->

然后使用以下脚本检索data div中的信息：

var dataDiv = document.getElementById('data');
var dataText = dataDiv.innerHTML;
// do something to parse dataText....

我认为解决问题的更好方法是使用服务器端语言/框架（如果使用的话）将JavaScript对象注入script中的<head>元素在交付之前呈现的页面。这样你就不必像上面的例子那样进行任何时髦的解析。

Answer 3

我很好奇禁止公开JS变量，但另一种方法是在服务器端构建一个JSON字符串，并将其粘贴到隐藏表单字段的value属性中：

<input type="hidden" id="some-id" value="{ abc: 123, ... }" />

and then...

<script type="text/javascript">
  // assuming you have some kind of JSON parser available
  var values = JSON.eval(document.getElementByID('some-id').value);

  // do something with values
</script>

MBO的解决方案也是可行的。

Answer 4

我同意Jordan认为JSON是要走的路，但是使用它比使用大量JSON对象的输入元素更容易，因为它是值：在脚本标记中声明JSON对象：

var continents = {
1 : "Europe",
2 : "Latin America"
};
var countries = {
1 : {
1 : "France",
2 : "Spain"
},
2 : {
1 : "Brazil",
2 : "Argentina"
}
};

我不确定我的格式是否正确，但我认为我很接近。要获取数据，您只需访问对象：

alert(continents[1]); // Europe
alert(countries[2][1]); // Brazil

在尝试访问数据之前，请确保已加载页面。

在html中预加载数据

4 个答案: