How to insert a certain portion of code into a textarea using a dropdownbox

[jonlloydd]

I want a certain portion of code to be inserted into a text area depending on which option is clicked in a dropdown box.
Where it says you selected header. I want it to display about 10 lines of code for each option. Can I store the lines of code in a varibale then just call the variable for each option? Any help on theis would be really appreciated. Thanks

<form class="form-horizontal form-box" role="form">
                                    <h4 class="form-box-header">Text Inputs</h4>
                                    <div class="form-box-content">                                      

                                       <div class="form-group">
                                            <label class="col-lg-4 control-label">Page Area</label>

                                            <div class="col-lg-8">                                             
                                                <select class="form-control" id="options" onchange="Edit()">
                                                    <option value="1">Header</option>
                                                    <option value="2">Footer</option>
                                                    <option value="3">Sidebar</option>
                                                    <option value="4">Background</option>                                                    
                                                </select>
                                            </div>
                                        </div>


                                        <script type="text/javascript">
                                        function Edit()
                                        {
                                            var frm = document.forms[0];
                                            var abc = frm.options.value;
                                            if (abc === "1")
                                                frm.text1.value = "You selected Header";
                                            else if (abc === "2")
                                                frm.text1.value = "You selected Footer";
                                            else if (abc === "3")
                                                frm.text1.value = "You selected Sidebar";
                                            else
                                                frm.text1.value = "You selected Background";
                                        } 
                                        </script>

                                        <div class="form-group">
                                            <label class="col-lg-4 control-label">Content</label>

                                            <div class="col-lg-8">
                                                <textarea class="form-control" name="text1" rows="20" placeholder="Textarea"></textarea>
                                            </div>
                                        </div>

                                        &nbsp;


                                    </div>
                                </form>

[diafol]

Wysiwyg editors may be useful for this, rather than plain textboxes. May to choose from:

http://socialcompare.com/en/comparison/javascript-online-rich-text-editors

Not necessarily advocating any from above link.

[jonlloydd]

I used ckeditor. Thanks for your help really appreciate it.

[diafol]

Well this should be straightforward.

It can all be done with client side code (js). You can store data as json if you want and attach button click (or dropdown/select change event) to changing editor content.

[diafol]

function setMyData( selectedItem )
{
    CKEDITOR.instances.editor1.setData( myCodeData[selectedItem] );
}

myCodeData global var that contains all your html data (json)
selectedItem is the option value passed from your dropdown onchange event.