Question

I have a drop down list (yii framework) , that i would like to change its selected value.
this is the drop down list :

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

Now this drop down list is a child of a parent that i would like to clone so i can use it again , so i used this to clone it:

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

I will use the var inner to change a few things in the element and clone it on the page.
Now here is my problem , For my new clone which is the var test , i would like to change the drop down list’s selected value , but it doesn’t work at all,i tried this :

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

and this :

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

Nothing works,i also tried other things that i don’t remember,however i should note that using the last one , when i debug it with :

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

it outputs a value of ‘3’ which is correct , however when i display it on the page , the selected value of the old drop down list doesn’t change.
this is the result:

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

Thank you in advance.

Answer 1

The line test.children("#room option[value='3']").attr('selected', 'selected') has the basic idea, but children gets the children elements only and filters them. So it would get #room, but it wouldn’t get the option elements because the <option>s are grandchildren of test. Instead, use find, which searches through all descendant elements. Here’s the code:
test.find("#room option[value='3']").attr('selected', 'selected')