I'm trying to collect all the option from one select element and insert them dynamically to another select element.
<select name="" id="main-products-images-standards-select">
<option value="1">Name 1</option>
<option value="2">Name 2</option>
<option value="3">Name 3</option>
</select>
<select name="" id=""></select>var main_products_images_standards_select = document.getElementById('main-products-images-standards-select').options
var standards = '';
for(var i = 0 ; i < main_products_images_standards_select.length ; i++)
{
standards += main_products_images_standards_select[i];
}when I print each option in the loop I get the required results, but as I collect them together I'm ending up with the next results
[object HTMLOptionElement][object HTMLOptionElement][object HTMLOptionElement][object HTMLOptionElement]What should I do to avoid those results Thanks.
Use .value to get the value of option
var main_products = document.getElementById('main-products')
var standards = '';
for (var i = 0; i < main_products.length; i++) {
standards += main_products[i].value;
document.getElementById('demo').innerHTML = standards;
}<select name="borderStyle" id="main-products">
<option value="solid">solid</option>
<option value="dotted">dotted</option>
<option value="dashed">dashed</option>
</select>
<div id="demo"></div>If you want to reprint the select with same options then use outerHTML on the id
You can use loop to run or have select number of times you have option or how many times you want
var main_products = document.getElementById('main-products')
document.getElementById('demo').innerHTML = main_products.outerHTML;<select name="borderStyle" id="main-products">
<option value="solid">solid</option>
<option value="dotted">dotted</option>
<option value="dashed">dashed</option>
</select>
<div id="demo"></div>