Using a drop-down multiple times

Question

Is it possible to write a <select> menu and use it in multiple places on web page?

example:

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

How can I use this menu multiple times within the same webpage?

Clone the elements with `$('#dm').clone()`. You will need to change (or remove the id attribute on the copies as id must be unique on the page) — iCollect.it Ltd, Sep 04 '14 at 10:05
Ctrl + C -> Ctrl + V :D If you are using JS you can look into template engine which allows you to do that. See: http://stackoverflow.com/questions/449780/recommended-javascript-html-template-library-for-jquery — GillesC, Sep 04 '14 at 10:07
Using a class instead of an ID is a really simple way of solving the multiple ID issue. — Candlejack, Sep 04 '14 at 10:08

score 3 · Answer 1 · answered Sep 04 '14 at 10:09

Give the <select> a class and then you can use the jQuery clone() function.

<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

iCollect.it Ltd · Accepted Answer · 2014-09-04T10:16:17.610

2

Keep the original in a dummy script block as a template (text/template is not recognized so is ignored).

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

Create copies using:

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

This avoids the unique id issue (as the select has no id). It is also very easy to read/maintain.

As suggested below, if you want to use this in a form, the select must be named:

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

note: The extra $() converts the string to a DOM element first before adding the attribute.

edited Sep 04 '14 at 10:16

answered Sep 04 '14 at 10:08

iCollect.it Ltd

92,391
25
181
202

If you want to use in a form, you must provide a name to the select. Using this answer, you can do this before append: `copy.attr('name','some name');` – Ruby Racer Sep 04 '14 at 10:14
How do I COPY when adding the drop-down dynamically? [JSFIddle](http://jsfiddle.net/6q9hn5Ln/2/) – Nelie Sep 04 '14 at 10:27
@Nelie: Can you please explain what you mean? How is the dropdown being added dynamically? – iCollect.it Ltd Sep 04 '14 at 10:28
See my JSFiddle. When "Add a Thought" is clicked 2 text fields appear. How do I have the drop-down next to the text field created in `#outWrap` using your COPY method? – Nelie Sep 04 '14 at 10:30
@Nelie: Is this a separate question? That fiddle does not have a menu? – iCollect.it Ltd Sep 04 '14 at 10:33
Yes I did not mention that in my question above. this is actually what I'm after... Appreciate if you could help on this matter. – Nelie Sep 04 '14 at 10:36
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/60609/discussion-between-trueblueaussie-and-nelie). – iCollect.it Ltd Sep 04 '14 at 10:37
Thanks TrueBlueAussie. That's exactly what I was looking for! I wish I could give you more points. :) – Nelie Sep 04 '14 at 10:38
When you can. I have plenty of other under-appreciated answers :) Enjoy. – iCollect.it Ltd Sep 04 '14 at 10:40

score 0 · Answer 3 · edited Sep 04 '14 at 10:12

0

Using a templating engine such as Handlebar or similar would be easy, but might be over kill in your case.

I would simply store the complete HTML code in a variable, and then inject that variable wherever I need it for future use. Problem here is complexity and maintainability of the HTML code. In any case something like this (using jQuery):

JS:

var myDropDown = 'youthtmlcode is here'

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

HTML:

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

edited Sep 04 '14 at 10:12

GreyRoofPigeon

17,833
4
36
59

answered Sep 04 '14 at 10:10

Amiga500

5,874
10
64
117

HTML in strings is error prone and not easy to read/maintain. Your templating suggestion is much better. – iCollect.it Ltd Sep 04 '14 at 10:11
1

I agree. Sometimes I use both ways, depending what I need. My opinion is that in this users case, using Handlebar might prove to be difficult. I apologize if I made mistake :) – Amiga500 Sep 04 '14 at 10:15

Using a drop-down multiple times

3 Answers3