如何在使用 jquery 单击特定 div 时更改下拉框的选定选项？答案

【问题标题】：How to change the selected option of a drop down box on clicking a particular div using jquery?如何在使用 jquery 单击特定 div 时更改下拉框的选定选项？
【发布时间】：2010-11-28 10:03:55
【问题描述】：

我有一个下拉菜单，其中包含“文本、文本区域、下拉菜单、电子邮件”等选项。我还有一个链接列表，如文本、文本区域等。当我单击这些链接时，会创建相应的 html 元素.即，如果我单击文本，则会创建一个文本框。如果我单击文本区域，则会创建一个文本区域。

现在我想让下拉框中选择的选项更新为我选择的链接的值，即如果我选择下拉，下拉框中要选择的选项必须是'Drop Down ' . 我该怎么做？

这是我的下拉框：

<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' );

 });

【问题讨论】：

标签： jquery select drop-down-menu

【解决方案1】：

类似

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

【讨论】：

【解决方案2】：

例如，要选择 Textarea 选项：

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

【讨论】：

【解决方案3】：

编辑了您的 HTML。 options 的值和 a 的 if 的值是一样的。

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

【讨论】：

我按照你的回答做了，但我没有得到结果。我已经有一个像 $('#fb_contentarea_col1 a').click(function() 这样的点击函数，在那里我得到了 attr id。我给了行 $("#fieldType option[value='" + text + "']" ).attr ( 'selected' , 'selected' ); 在里面，但它没有用。唯一的区别是我没有下拉框和链接在同一个 div 中，因为我希望它们放在不同的地方。但是你的演示效果很好。我不明白。
在代码中我更改了选项值。请检查一下。