Manipulating DOM in the "Custom Fields" tab on Product Edit page

[scisteffan]

I am trying to create a custom field plug in with two dropdowns, the second of which will have an array of different values depending on the selected value of the first. Should be easy with simple Javascript DOM modification. The following simple javascript code works in the Joomla backend except in the product edit tabbed area:

Code Select Expand

<select id='select1' onChange='document.getElementById("select2").hidden = true'>
<option value='1'>1</option>
<option value='2'>2</option>
</select>
<select id='select2'>
<option value='1'>1</option>
<option value='2'>2</option>
</select>

On the product edit page, there is the following code, defined on line 146 of admin/com_virtuemart/helpers/adminui.php. It is used to split the product edit page into tabs. However, inserting the above <select> code before this div results in the correct action (second select menu hidden), but when inserted below the <div>, the second menu does not hide.

Code Select Expand

<div id="admin-ui-tabs">

Is this a bug or something I'm missing (in JQuery?)?

[scisteffan]

Well I'm in the process of updating my web knowledge after 5 years of inactivity w/ web development!

The problem was related with using the JQuery chosen plugin. When adding a new custom field that contains a select menu in the product edit view in the backend, chosen was conflicting with my JQuery code, so I simply wrapped the select menus in a div and tell chosen to skip those select menus.