Estoy tratando de clonar una selección de opciones en otra selección. Por el momento puedo hacerlo, pero ahora la opción original contiene un atributo personalizado. Entonces mi pregunta es ¿cómo puedo acceder al atributo personalizado? Esto es lo que tengo por ahora:
var options = $('#sel1 option'); var arrayOptions = []; for (var i = 0; i < options.length; i++) { var id = parseInt($(options[i]).val(), 10); var text = $(options[i]).text() || '[select a type]'; arrayOptions.push('<option value="' + id + ' data-custom="' + options[i]["data-custom"] + '">' + text + '</option>'); } console.log(arrayOptions); <select id="sel1"> <option value="1" data-custom="abc1">Hello 1</option> <option value="2" data-custom="abc2">Hello 2</option> <option value="3" data-custom="abc3">Hello 3</option> </select>En este momento, las opciones [i] ["data-custom"] están configuradas como indefinidas en lugar de abc1, abc2, etc.
Aquí hay un violín.
Puedes usar dataset.custom
var options = $('#sel1 option'); var arrayOptions = []; for (var i = 0; i < options.length; i++) { var id = parseInt($(options[i]).val(), 10); var text = $(options[i]).text() || '[select a type]'; arrayOptions.push('<option value="' + id + ' data-custom="' + options[i].dataset.custom + '">' + text + '</option>'); } $('#result').text(arrayOptions.join("\n")); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="sel1"> <option value="1" data-custom="abc1">Hello 1</option> <option value="2" data-custom="abc2">Hello 2</option> <option value="3" data-custom="abc3">Hello 3</option> </select> <pre id="result"></pre>Por aquí
const arrayOptions = [...document.querySelectorAll('#sel1 option')] .map( opt => `<option value="${opt.id}" ` + `data-custom"${opt.dataset.custom}">` + `${opt.textContent}"</option>` ) console.log(arrayOptions); <select id="sel1"> <option value="1" data-custom="abc1">Hello 1</option> <option value="2" data-custom="abc2">Hello 2</option> <option value="3" data-custom="abc3">Hello 3</option> </select>