Transform select and its options into divs

The name of the pictureThe name of the pictureThe name of the pictureClash 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>





There's no reason to post a 3rd party link to your code, when you've already provided that code as a code snippet right here (DRY).
– Scott Marcus
Aug 10 at 21:49




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>





Yup, this is your answer.
– Adam H
Aug 10 at 21:48





This will work.
– JKimbrough
Aug 10 at 21:52






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.

Popular posts from this blog

Firebase Auth - with Email and Password - Check user already registered

Dynamically update html content plain JS

Creating a leaderboard in HTML/JS