多次使用下拉菜單

是否可以編寫<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

多次使用下拉菜單

回答

相關問題