使用 jquery 更改下拉列表选定值答案

【问题标题】：changing a drop down list's selected value with jquery使用 jquery 更改下拉列表选定值
【发布时间】：2012-08-11 11:31:13
【问题描述】：

我有一个下拉列表（yii 框架），我想更改它的选定值。这是下拉列表：

<?php
                $t = is_null($dataProvider[$key]['room']) ? 'NA' : $dataProvider[$key]['room'];

                echo 'Room Number : ' . CHtml::dropDownList(Rooms::model(), 'roomID', CHtml::listData(Rooms::model()->findAll(array(
                                    'condition' => 'status = :status or roomID = :roomID',
                                    'params' => array(
                                        ':status' => 'ready',
                                        ':roomID' => $dataProvider[$key]['room']
                                    )
                                )), 'roomID', 'roomID'), array('id' => 'room', 'class' => 'ui-widget-content', 'empty' => 'NA',
                'options' => array($t => array('selected' => true))))
                ;
                ?>

现在这个下拉列表是我想克隆的父母的孩子，所以我可以再次使用它，所以我用它来克隆它：

var test =$("#users-contain").children(':last').clone(true,true);
        test.children("#room option[value='3']").attr('selected', 'selected');
        test.children('table').children('tbody').children('tr').empty();
        var inner = test.clone(true,true);

我将使用 var inner 更改元素中的一些内容并将其克隆到页面上。现在这是我的问题，对于我的新克隆，即 var 测试，我想更改下拉列表的选定值，但它根本不起作用，我试过这个：

test.children("#room option[value='3']").attr('selected', 'selected');

还有这个：

test.children('#room').val(3);

没有任何效果，我还尝试了其他我不记得的东西，但是我应该注意使用最后一个，当我使用它进行调试时：

console.log(test.children("#room").val());

它输出一个正确的值'3'，但是当我在页面上显示它时，旧下拉列表的选定值不会改变。结果如下：

<select id="room" class="ui-widget-content" name="">
<option value="">NA</option>
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>

提前谢谢你。

【问题讨论】：

标签： javascript jquery html yii html-select

【解决方案1】：

test.children("#room option[value='3']").attr('selected', 'selected') 行具有基本思想，但children 仅获取子元素并过滤它们。所以它会得到#room，但它不会得到option 元素，因为<option>s 是test 的孙子。相反，使用find，它会搜索所有后代元素。这是代码：
test.find("#room option[value='3']").attr('selected', 'selected')

【讨论】：