Javascript - Find and duplicate dropdown

Question

How I can duplicate the following content in JavaScript? I want to have two dropdown's in the same page.

<fieldset id="product-options-wrapper" class="product-options">
  <dl class="last">
    <dt>
    <label class="required">
    <em>*</em>
    Pack Size/Price
    </label>
    </dt>
    <dd class="last">
      <div class="input-box">
        <select id="attribute148" class="required-entry super-attribute-select" name="super_attribute[148]" onchange="return changeSku(148, this);">
          <option value="">Choose an Option...</option>
          <option value="76">10g: €9.60</option>
          <option value="61">25g: €17.40</option>
          <option value="78">100g: €43.80</option>
        </select>
      </div>
    </dd>
  </dl>

Thank you

why would you want to have 2 select with same options in one page?use `.find()` with `.clone()` — guradio, Jan 11 '17 at 11:12
Also, remove the id and use only class or set a different id for the cloned element. — The Alpha, Jan 11 '17 at 11:12
Please see ► [**how-to-copy-a-dom-node-with-event-listeners**](http://stackoverflow.com/questions/15408394/how-to-copy-a-dom-node-with-event-listeners) and if using jQuery ► [**jQuery Clone**](https://api.jquery.com/clone/) Try those and if you have issues, feel free to post your code and can help you with it. — Nope, Jan 11 '17 at 11:20

DomeTune · Accepted Answer · 2017-01-11T11:21:43.040

1

var $select = document.querySelector('select#attribute148');
$select.id = "newId";
document.querySelector('yourNewDivId').appendChild($select);

First you get the actual select to JS. Then you update the id and at last you add it to the div, where you wanna have it.

EDIT for Comment

You could build a template:

function createSelect(id, options){
    var $select = document.createElement('select');
    $select.id = id;
    for(var i = 0; i < options.length; i++){
        var $option = document.createElement('option');
        $option.value = options[i].value;
        $option.innerHTML = options[i].name;
        $select.appendChild($option);
    }
    return $select;
}
var select = createSelect(48, [{value: 76, name: "10g: €9.60}, ...]);
document.querySelector('target').appendChild(select);

edited Jan 11 '17 at 11:21

answered Jan 11 '17 at 11:13

DomeTune

1,401
10
21

the ID is not static, so we can't this – Robert Jan 11 '17 at 11:14
so this code is not static that attributeID and the select options will not be the same, what you see is for one product I have many products. – Robert Jan 11 '17 at 11:33
With the template function you can add a id, which ever you wanna use. Its completly individuell. – DomeTune Jan 11 '17 at 11:35
I don't understand – Robert Jan 11 '17 at 11:36
I'll do a jsfiddle for you. – DomeTune Jan 11 '17 at 11:36

Stuart · Answer 2 · 2017-01-11T11:26:28.630

0

You can use the cloneNode method for this.

var el = document.getElementById('product-options-wrapper');
var dupEl = el.cloneNode();

dupEl.id = "some-new-id";
document.getElementById('some-container').appendChild(dupEl);

EDIT: Updated with full code example

edited Jan 11 '17 at 11:26

answered Jan 11 '17 at 11:12

Stuart

201
1
11

score 0 · Answer 3 · answered Jan 11 '17 at 11:26

Test this out!

document.getElementById("product-options-wrapper").onclick = function(){ // when the fieldset is clicked
    var clone = this.cloneNode(true); 
    this.appendChild(clone); // clone it and append to the last fieldset
}

When a user clicks on the specified fieldset, it will clone it, and append the new clone, to the previous.

You can change what the new clone is appended to by changing this.appendChild(clone) to document.getElementById("yourid").appendChild(clone)

Hope this helps! :-)

Thank you but what I need is to duplicate that dropdown, in fact to duplicate as a list, I want to get the dropdown options and then to clone this and list in another div. so I don't need any click event — Robert, Jan 11 '17 at 11:31

Javascript - Find and duplicate dropdown

3 Answers3