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

У меня есть раскрывающееся меню с параметрами «текст, текстовая область, раскрывающийся список, электронная почта» и т. Д. У меня также есть список ссылок, таких как текст, текстовая область и т. Д. Когда я нажимаю эту ссылку, создается соответствующий элемент 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' );

 });

person Angeline    schedule 15.09.2009    source источник


Ответы (3)


Что-то вроде

$("a").click(function() {
    $("option#"+$(this).attr("id")).attr("selected", "selected");
});
person Davide Gualano    schedule 15.09.2009

Например, чтобы выбрать параметр Textarea, выполните следующие действия:

// clear previous selected
$('option[selected]').removeAttr("selected");
// set a new one
$('option#Textarea').attr('selected', 'selected');
person Tzury Bar Yochay    schedule 15.09.2009

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

См. рабочую демонстрацию

<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>
person rahul    schedule 15.09.2009
comment
Я сделал в соответствии с вашим ответом, но не получил результата. У меня уже есть функция щелчка, например $ ('# fb_contentarea_col1 a'). Click (function (), где я получаю идентификатор attr. Я указал строку $ (# fieldType option [value = '+ text +']). Attr ( 'selected', 'selected'); внутри этого, но это не сработало. Единственная разница: у меня нет ни выпадающего списка, ни ссылок в одном и том же div, так как я хочу, чтобы они были размещены в разных местах. Но демо ur хорошо работает Я не понимаю. - person Angeline; 15.09.2009
comment
В коде я изменил значения параметров. Пожалуйста, проверьте это. - person rahul; 15.09.2009