How to make second dropdown value the same as the first dropdown value?

Question

I have following code in my view:

<?= $form->labelEx($model, 'p_2_1', array('class' => 'col-xs-12 col-sm-2 control-label')) ?>
    <div class="col-xs-12 col-sm-3">
        <?= $form->dropDownList($model, 'p_2_1',array_combine($model->getData('money'),$model->getData('money')), array('class' => 'form-control')) ?>
        <?= $form->error($model, 'p_2_1') ?>
    </div>
<?= $form->labelEx($model, 'p_3_1', array('class' => 'col-xs-12 col-sm-2 control-label')) ?>
    <div class="col-xs-12 col-sm-3">
        <?= $form->dropDownList($model, 'p_3_1',array_combine($model->getData('money'),$model->getData('money')), array('class' => 'form-control')) ?>
        <?= $form->error($model, 'p_3_1') ?>
    </div>

And in my model, I have following code:

public function getData($property) {
    $data = array(
        'money' => array(
            Yii::t('plaintinfo', 'RUB'),
            Yii::t('plaintinfo', 'USD'),
            Yii::t('plaintinfo', 'EURO'),
        ),
    );
    return $data[$property];
}

I need to develop JavaScript code when user p_2_1 value changes, p_3_1 value also changes and becomes the same as p_2_1 value. (for example, if user chooses USD from the drop down list p_2_1, the value of p_3_1 will be USD automatically (the same as p_2_1(USD) ). How can I do it?

Answer 1

You can solve it with following Javascript code. You could also change your ids to more understandable.

<script>
$("#p_2_1").change(function(){
   var selected = $("#p_2_1 option:selected").val();
   var elementToChange = document.getElementById('p_2_1');
   elementToChange.value = selected;
});
</script>