How to change the selected option of a drop down box on clicking a particular div using jquery?

Question

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>

 </select>
</div>

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>
 </ul>
</div>

Jquery function

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

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

 });

Answer 1

For instance, to make the Textarea option selected do:

// clear previous selected
$('option[selected]').removeAttr("selected");
// set a new one
$('option#Textarea').attr('selected', 'selected');

Answer 2

Something like

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

Answer 3

Edited your HTML. The value of options and if of a are made same.

See a working Demo

<div id="fb_contentarea_col1down">
            <p class="fieldTitle" style="display: none;">
                Field Type:</p>
            <div id="selectFieldType">
                <select id="fieldType" style="">
                    <option id="Option1" value="Text" selected="selected">Text</option>
                    <option id="Option2" value="Textarea">Text Area</option>
                    <option id="Option3" value="Dropdown">Drop Down</option>
                    <option id="Option4" value="Radio">Multiple Choices</option>
                </select>
            </div>
            <h6 class="page_heading">
                Common Fields:</h6>
            <ul class="formfield">
                <li><a href="#" id="Text" class="test">Text</a></li>
                <li><a href="#" id="Textarea" class="test">Textarea</a></li>
                <li><a href="#" id="Dropdown" class="test">Dropdown</a></li>
                <li><a href="#" id="Radio" class="test">Multiple Choices</a></li>
            </ul>
        </div>

<script>
        $(document).ready ( function() {
            $("a.test").click ( function () {
                var text = $(this).attr('id');
                $("#fieldType option[value='" + text + "']").attr ( 'selected' , 'selected' );
            });
        });    
    </script>