Как изменить выбранную опцию выпадающего списка при нажатии на конкретный div с помощью jquery?

Question

У меня есть выпадающее меню с параметрами «текст, текстовая область, выпадающий список, электронная почта» и т. Д. У меня также есть список ссылок, таких как текст, текстовая область и т. Д. Когда я нажимаю на эту ссылку, создается соответствующий элемент HTML , Т.е., если я нажимаю текст, создается текстовое поле. И если я нажимаю текстовую область, текстовая область создается.

Теперь я хочу, чтобы параметр, выбранный в раскрывающемся списке, обновлялся до значения ссылки, которую я выбрал, т. Е. Если я выбираю раскрывающийся список, параметр, который необходимо выбрать в раскрывающемся списке, должен быть «Выпадающий '. Как я могу это сделать?

Вот мой выпадающий список:

<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>

Это ссылки, которые у меня есть. При нажатии на это я генерирую этот конкретный элемент формы. Я также хочу, чтобы параметр в раскрывающемся списке обновлялся до этого имени элемента формы.

<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

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

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

 });

Answer 1

Что-то вроде

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

Answer 2

Отредактировал ваш HTML. Значения опций и если a сделаны одинаковыми.

См. рабочий Демо

<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>

Answer 3

Например, чтобы выбрать опцию Textarea, выполните:

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