How to change the selected option from a drop-down list by clicking on a particular div using jquery?


I have a drop down menu with options 'text,text area,drop down ,email' etc. I also have a list of links like text ,text area etc. When I click these link,the corresponding html element is created. i.e, if I click text, a text box is created. And if I click text area,a text area is created.

Now I want the option selected in the drop down box to be updated to the value of the link I have selected, i.e., if I select drop down, the option to be selected in the drop down box must be 'Drop Down' .How can I do this?

Here's my drop down box:

<p class="fieldTitle" style="display: none;" >Field Type:</p>
<div id="selectFieldType">
    <select id="fieldType"  style="display: none;">
        <option id="Text" value="Text" selected="selected" >Text</option>
        <option id="Textarea" value="Textarea">Text Area</option>
        <option id="Dropdown" value="Dropdown"  >Drop Down</option>
        <option id="Radio" value="Radio">Multiple Choices</option>


This is the links that I have. On clicking this I generate that particular form element. I also want the option in the dropdown box to be updated to that form element name.

<div id="fb_contentarea_col1down">

   <h6 class="page_heading">Common Fields:</h6>
    <ul class="formfield">
        <li><a href="#" id="text">Text</a></li>
        <li><a href="#" id="textarea">Textarea</a></li>
        <li><a href="#" id="dropdown">Dropdown</a></li>
        <li><a href="#" id="radio">Multiple Choices</a></li>

Jquery function

 $('#fb_contentarea_col1 a').click(function() {  

    $("#fieldType option[value='" + fieldType + "']").attr ( 'selected' , 'selected' );


Something like

$("a").click(function() {
    $("option#"+$(this).attr("id")).attr("selected", "selected");