[thelist] JS pulldown option manipulation

[Gordon Jessop]

Hello all,

First time poster, long time lurker.

I'm seeing some strange behaviour from a specific browser (Mac IE 5.1, OS
9.1) and am wondering if I can get a wider browser sampling by asking the
group to hit a page, testing the pulldown menus found on it.

Any help would be greatly appreciated.  Problem details follows my tip,
below.

<tip type="Javascript" author="Gordon Jessop">

I find this site to be an invaluable resource when designing cross platform,
browser independent javascript code ("cross platform, browser independent"
is a strict practice at the company I work for)

    http://www.htennant.com/hta/askus/js.htm

It hasn't been updated since Jan 1999 but it has certainly proved to be a
time saver for me.  Hope it helps.  If you know of a more recent, yet as
functional resource, let me know.


</tip>



THE PAGE
####################

http://www.advansis.com/test.pulldown.html

The page in question is a HTML dump of a configuration form from the next
release of a software piece we are working on.

The form lists a bunch of registration preferences that can be modified.  We
are using javascript to handle the "Question Order" -- pulldown menus offer
the admin the ability to re-order the questions as they will appear on the
registration form.

When a pulldown menu is changed, the other menus are changed (if necessary)
to reflect the new order of questions.

For example:

    Menu 1 selected value = Email
    ..  (menu 2, 3 etc.)
    Menu 4 selected value = Last Name
    ..  (menu 5, 6 etc.)

    Change Menu 1 to "Last Name" will cause
    Menu 4 to be changed to "Email"  and so on.

The number of menus are variable (depending on the number of questions the
administrator elects to have on the registration form).  The software will
verify the order and ensure that there are no overlaps etc., but we wish to
use the JS to assist the admin and make the task of re-ordering as painless
as possible.



THE PROBLEM
####################
Under the browsers we have access to here at the office, the menu changer
works flawlessly.  However the browser noted above, while executing the menu
changer without fail, inserts a tonne of blank lines after the pulldown menu
that is changed  (IE Menu 4 in our example above).

Before operation:

    > Email
    > Date of Birth
    > First Name
    > Last Name
    > Favourite Color
    > Password

After operation:

    > Last Name
    > Date of Birth
    > First Name




    > Email
    > Favourite Color
    > Password





THE JS SOURCE
##################

On the HTML form:

    <select onChange="change_order_menu('1');">Menu 1</select>
    ..  (menu 2, 3 etc.)
    <select onChange="change_order_menu('4');">Menu 4</select>



JS change_order_menu function

function change_order_menu(number)
{
    var selected = 1;
    var currentMenu = document.formName.elements['ums_questions_order_' +
number];
    var currentValue = currentMenu.options[currentMenu.selectedIndex].value;
    var currentText = currentMenu.options[currentMenu.selectedIndex].text;
    var men = '';
    var val = '';
    var txt = '';
    for(var j = 0; j < alphaArray.length; j ++)
    {
        if(number == j)
        {
            continue;
        }
        men = '';
        val = '';
        txt = '';
        men = document.formName.elements['ums_questions_order_' + j];
        val = men.options[men.selectedIndex].value;
        txt = men.options[men.selectedIndex].text;
        if(txt == currentText)
        {
            changeMenu = j;
        }
        setArray[txt] = 1;


    }
    var whatEdit = document.formName.elements['ums_questions_order_' +
changeMenu];
    eraseChild(whatEdit);
    for(var i = 0; i < alphaArray.length; i ++)
    {
        write_option(whatEdit, i,alphaArray[i]);
        if(setArray[alphaArray[i]])
        {
            continue;
        }
        else
        {
            selected = i;
        }
    }

    whatEdit.selectedIndex = selected;
    for(var k = 0; k < alphaArray.length; k ++)
    {
        setArray[alphaArray[k]] = '';
    }
}







--
Advansis: http://www.advansis.com/