多次使用下拉菜单答案

【问题标题】：Using a drop-down multiple times多次使用下拉菜单
【发布时间】：2014-10-29 00:51:37
【问题描述】：

是否可以编写<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>

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

【问题讨论】：

可以，但是你不能在同一个页面上使用同一个 id 两次。
使用$('#dm').clone() 克隆元素。您将需要更改（或删除副本上的 id 属性，因为 id 在页面上必须是唯一的）
Ctrl + C -> Ctrl + V :D 如果您使用的是 JS，您可以查看允许您执行此操作的模板引擎。见：stackoverflow.com/questions/449780/…
使用类而不是 ID 是解决多 ID 问题的一种非常简单的方法。

标签： javascript jquery html css

【解决方案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);

这避免了 unique id 问题（因为选择没有 id）。它也很容易阅读/维护。

如下所示，如果你想在表单中使用它，选择必须命名：

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

注意：额外的 $() 在添加属性之前首先将字符串转换为 DOM 元素。

【讨论】：

如果你想在表单中使用，你必须为选择提供一个名称。使用此答案，您可以在附加之前执行此操作：copy.attr('name','some name');
动态添加下拉菜单时如何复制？ JSFIddle
@Nelie：你能解释一下你的意思吗？下拉菜单是如何动态添加的？
查看我的 JSFiddle。单击“添加想法”时，会出现 2 个文本字段。如何使用您的 COPY 方法在 #outWrap 创建的文本字段旁边显示下拉菜单？
@Nelie：这是一个单独的问题吗？那个小提琴没有菜单？

【解决方案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

【讨论】：

【解决方案3】：

使用诸如 Handlebar 或类似的模板引擎会很容易，但在您的情况下可能会过度杀戮。

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

JS：

var myDropDown = 'youthtmlcode is here'

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

HTML：

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

【讨论】：

字符串中的 HTML 容易出错且不易阅读/维护。您的模板建议要好得多。
我同意。有时我会同时使用两种方式，这取决于我的需要。我的观点是，在这个用户案例中，使用 Handlebar 可能会很困难。如果我犯了错误，我深表歉意:)