How to select 2nd value from dropdown from 1st dropdown selection with JQuery in Zend Form

Question

In my Zend Form I have 2 select boxes, each selecting a different column in the same table. How can I make these two items dependent: if a value in box1 is selected the matching value in box2 is selected and if I select a value in box2 the matching value in box1 is selected. This way I can choose to select on either column.

My Table:

id code description

1 A Apples

2 B Bananas

My Form elements:

$objcode = new Zend_Form_Element_Select( 'code'); 
$objcode 
->setRequired(false)
->setAttrib('id','code');
->...more attributes to cleanup input
$this->addElement($objcode );

$objdescription = new Zend_Form_Element_Select( 'description'); 
$objdescription
->setRequired(true)
->setAttrib('id','description');
->...more attributes to cleanup input
$this->addElement($objdescription);

View:

<td>Box1</td>
<td><?php echo $this->objForm->code?></td>
<td>Box2</td>
<td><?php echo $this->objForm->description?></td>

So if I select B in box1, the selected value in box2 should change to Bananas. If I then select Apples in box2 the value in box1 should change to A.

I found this link using jQuery but didn't succeed and this is only one way (box 2 is dependent on box 1 but box1 is not dependent on box 2). I am sure I need JQuery on change event to handle this but I am not sure if to put jQuery in the Form or in the View and how?

I tried adding this attribute in Form element Code:

->setAttrib('onChange','javascript: OnChangeCode();')

And adding in View:

function OnChangeCode()
    {
    JQuery("#code").change(function () {
        JQuery("#description")[0].selectedIndex = JQuery(this)[0].selectedIndex;
        });
    }

With no result however.

Answer 1

Try this:

function OnChangeCode()
{
    jQuery("#description")[0].selectedIndex = jQuery("#code")[0].selectedIndex;
}

note : I think it's jQuery instead of JQuery

Another way to do like the example:

1 - remove ->setAttrib('onChange','javascript: OnChangeCode();')

2 replace your function by :

$(function() {
    $("#code").change(function() {
        $("#description")[0].selectedIndex = $(this)[0].selectedIndex;
    });
});