Question

是否可以编写<select>菜单并在网页上的多个位置使用它？

示例：

<select id="dm">
  <option value="">Select Quantity</option>
  <option value="less ">50 - 60</option>
  <option value="medium ">61 - 70</option>
  <option value="large ">71 - 80</option>
  <option value="xl ">Above 80</option>
</select>

如何在同一网页内多次使用此菜单？

Answer 1

将原始文本作为模板保存在虚拟脚本块中（无法识别文本/模板，因此将被忽略）。

<script id="dm" type="text/template">
    <select>
       <option value="">Select Quantity</option>
       <option value="less ">50 - 60</option>
       <option value="medium ">61 - 70</option>
       <option value="large ">71 - 80</option>
       <option value="xl ">Above 80</option>
    </select>
</script>

使用以下方式创建副本：

var copy = $('#dm').html();
something.append(copy);

这可以避免唯一ID 问题（因为select没有id）。它也很容易阅读/维护。

如下所示，如果要在表单中使用此选项，则必须将select命名为：

var $copy = $($('#dm').html()).attr('name', newMenuName);
something.append(copy);

注意：额外的$（）会在添加属性之前将字符串转换为DOM元素。

Answer 2

给<select>一个类，然后你可以使用jQuery clone()函数。

<select class="dropClass" id="dm">
  <option value="">Select Quantity</option>
  <option value="less ">50 - 60</option>
  <option value="medium ">61 - 70</option>
  <option value="large ">71 - 80</option>
  <option value="xl ">Above 80</option>
</select>

<div id="someDiv"><!-- you want the dropdown here too --></div>

$( ".dropClass" ).clone().appendTo( "#someDiv" );

DEMO

Answer 3

使用像Handlebar这样的模板引擎很容易，但在你的情况下可能会过度杀死。

我只是将完整的HTML代码存储在变量中，然后将该变量注入我需要的任何地方以备将来使用。这里的问题是HTML代码的复杂性和可维护性。在任何情况下都是这样的（使用jQuery）：

JS：

var myDropDown = 'youthtmlcode is here'

$("#myDropDown").html(myDropDown);

HTML：

<div id="myDropDown"></div>

使用下拉多次

3 个答案: