Onselect insert value of div to textarea using Jquery

Onselect insert value of div to textarea using Jquery

  1. <html> <select id="select1" class="selected"> <option value="box1">clicked box 1</option> <option value="box2">clicked box 2</option> <option value="box3">clicked box 3</option> </select> <select id="fs" class="selected"> <option value="Trebuchet MS" selected="selected">Trebuchet MS</option> <option value="Times New Roman">Times New Roman</option> <option value="Arial">Arial</option> <option value="Verdana ">Verdana </option> <option value="Impact">Impact </option> <option value="Comic Sans MS">Comic Sans MS</option> <option value="Georgia">Georgia</option> <option value="sans-serif">sans-serif</option> </select> <div id="boxes"> <div id="box1"><img src="images/img1.png" /> <p>Box 1 stuff...</p></div> <div id="box2"><img src="images/img2.png" /><p>Box 2 stuff...</p></div> <div id="box3"><img src="images/img3.png" /><p>Box 3 stuff...</p></div> </div> <textarea id="ta" class="selected"></textarea>
    </html>
Jquery:
 
  1. $("#select1").change(function(){ $("#" + this.value).show().siblings().hide(); var newTextVal = ""; $('#select1').each( function() { newTextVal += $("#" + this.value).show().siblings().text(); } ); $('#ta').val( newTextVal ); }); $("#select1").change();

Fiddle Link: http://jsfiddle.net/sharma_pooja/P2Kyk/46/

Example : Onchange of selectbox option with id (select1),

  1. show div (working fine)
  2. show div text in textarea
  3. show fontfamily of div text in fontfamily selectbox

Please suggest a jquery solution for this.

Thanks in advance