多次使用下拉菜单

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

我如何使用这个菜单多次在同一网页内？

来源

2014-09-04 Nelie

是的，但你不能在同一个页面上使用相同的ID两次。 – serakfalcon 2014-09-04 10:05:36

你是什么意思菜单？ – 2014-09-04 10:05:41

使用'$（'＃dm'）。clone（）'来克隆元素。您需要更改（或删除副本上的id属性，因为id在页面上必须是唯一的） – 2014-09-04 10:05:48

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

<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问题（如选择没有ID）。阅读/维护也很容易。

如下建议，如果你想在一个窗体使用此，选择必须被命名为：

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

注：额外的$（）将之前首先将字符串转换为一个DOM元素属性。

来源

2014-09-04 10:08:39

美丽！谢谢。 – Nelie 2014-09-04 10:11:45

如果您想在表单中使用，则必须为选择提供名称。使用这个答案，你可以在append之前做到这一点：'copy.attr（'name'，'some name'）;' – 2014-09-04 10:14:13

如何动态添加下拉列表时复制？ [JSFIddle]（http://jsfiddle.net/6q9hn5Ln/2/） – Nelie 2014-09-04 10:27:10

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

来源

2014-09-04 10:09:32 LinkinTED

使用模板引擎，如手把或类似的是容易的，但可能在你的情况下，可以在杀死。

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

JS：

var myDropDown = 'youthtmlcode is here' 

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

HTML：

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

来源

2014-09-04 10:10:09

字符串中的HTML容易出错并且不易读取/维护。你的模板建议要好得多。 – 2014-09-04 10:11:01

我同意。有时我使用两种方式，取决于我需要的。我的观点是，在这个用户案例中，使用手推车可能证明是困难的。我道歉，如果我犯了错误:) – 2014-09-04 10:15:46

多次使用下拉菜单

回答

相关问题