重用性：如何在网页的不同位置使用相同的列表项

Question

我想在首页以及两个不同的对话框中使用一组100个列表项。 我想，编写相同的代码集将是愚蠢的。 所以我如何在网页的3个不同位置使用相同的集合

Answer 1

我将使用jQuery（或其他客户端库）来克隆项目，并将其附加到每个<select>标记中。 如果您需要帮助，请告诉我。

Answer 2

您可以使用此代码段克隆HTML，

  <script>
      (function(){
        $(document).ready(function(){

            $("#listA").clone().appendTo("#dialogueBox1");
            $("#listA").clone().appendTo("#dialogueBox2");

         })
       })();
   </script>

其中listA是“ ul”或“ ol”元素的ID。

Answer 3

如果您想要一个纯HTML5解决方案，这可能很有趣...使用datalist元素- 但目前对此功能的支持非常有限：

https://developer.mozilla.org/zh-CN/docs/HTML/Element/datalist

（来自上面的链接）

<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
</datalist>

<input class="one" list="browsers" />
<input class="two" list="browsers" />
<input class="three" list="browsers" />

Answer 4

我会将列表存储在一个json文件中：list.json

{
  list: [element0, element1, ..., element99]
}

然后使用jQuery通过ajax检索元素，例如：

/**
 * Replaces the element's content with the list of items.
 */
function setList(element) {
  $.getJson(listJsonURL, function (data) {
    var list = "<ul>";
    for (var i = 0, len = data.list.length; i<len; i++) {
      list += "\n  <li>" + data.list[i] + "</li>";
    }
    list += "\n</ul>";
    $(element).html(list);
  });
}

警告：未经测试的代码。