Multi tool use

Clash Royale CLAN TAG#URR8PPP

Transform select and its options into divs

I'm trying to transform a select and it's options into divs and child divs. What i want is each select to be a div inside the div with transform id (that is working) and inside those divs i want it's respectives options, i'm not figuring out how to do it, i'll be grateful if someone knows.

$('.selects select').each(function()
var select = $(this);
$('#transform').append('<div>');

select.find('option').each(function()
var option = $(this).text();
$('#transform div').append('<div>'+option+'</div>');
);
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='selects'>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
</div>

<div id='transform'></div>

1 Answer
1

The easiest way to fix this is to store a reference to the div that you want to append the children div to. Then at the end, append the parent div to where ever you want it. This way you don't have to find/remember where the children should go.

$('.selects select').each(function()
var select = $(this);
var $div = $('<div>');

select.find('option').each(function()
var option = $(this).text();
$div.append('<div>'+option+'</div>');
);

$('#transform').append($div);
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='selects'>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
</div>

<div id='transform'></div>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.