Expand my Community achievements bar.

SOLVED

Drop Down Boxes

Avatar

Level 2

Hi,

I am developing a form that allows the user to select an option from a drop down list of four options. The second drop down list is to allow them to pick from the same options minus the one they chose in the first drop down list.

Basically if the first option is not available what would your second option be? We don’t want them to choose the same option in both instances.

Thanks

1 Accepted Solution

Avatar

Correct answer by
Level 5

Hi,

1. You create the first dropdown, for example with the following entries:

  • 123
  • 456
  • 789

2. You create a second dropdown which is empty.

3. Then you have to copy the follwoing script in the change-event of the first dropdown:

switch (xfa.event.newText)

{

    case "123":

        DropdownListe2.clearItems();

        DropdownListe2.addItem("Please select a value");

        DropdownListe2.addItem("456");

        DropdownListe2.addItem("789");

        DropdownListe2.selectedIndex = 0;

        break;

    case "456":

        DropdownListe2.clearItems();

        DropdownListe2.addItem("Please select a value");

        DropdownListe2.addItem("123");

        DropdownListe2.addItem("789");

        DropdownListe2.selectedIndex = 0;

        break;

    case "789":

        DropdownListe2.clearItems();

        DropdownListe2.addItem("Please select a value");

        DropdownListe2.addItem("123");

        DropdownListe2.addItem("456");

        DropdownListe2.selectedIndex = 0;

        break;

    default:

        break;

}

That's all.

I hope it's helpful for you,

kind regards,

Mandy

View solution in original post

12 Replies

Avatar

Correct answer by
Level 5

Hi,

1. You create the first dropdown, for example with the following entries:

  • 123
  • 456
  • 789

2. You create a second dropdown which is empty.

3. Then you have to copy the follwoing script in the change-event of the first dropdown:

switch (xfa.event.newText)

{

    case "123":

        DropdownListe2.clearItems();

        DropdownListe2.addItem("Please select a value");

        DropdownListe2.addItem("456");

        DropdownListe2.addItem("789");

        DropdownListe2.selectedIndex = 0;

        break;

    case "456":

        DropdownListe2.clearItems();

        DropdownListe2.addItem("Please select a value");

        DropdownListe2.addItem("123");

        DropdownListe2.addItem("789");

        DropdownListe2.selectedIndex = 0;

        break;

    case "789":

        DropdownListe2.clearItems();

        DropdownListe2.addItem("Please select a value");

        DropdownListe2.addItem("123");

        DropdownListe2.addItem("456");

        DropdownListe2.selectedIndex = 0;

        break;

    default:

        break;

}

That's all.

I hope it's helpful for you,

kind regards,

Mandy

Avatar

Level 2

Thanks Mandy,

The script works well, except if the user changes their mind on their first option they can select the same second option as the first option.

Any ideas,

Ian

Avatar

Level 5

Hi Ian,

sorry my english isn't the best. Therefore I don't understand your question.

  • You said the user select a value in the first dropdown for example "123".
  • Then makes the script that he can select only "456" or "789" in the second dropdown.
  • Then he want to change his first choice in the first dropdown??

No problem with this script.

If the user after the first choice in the first dropdown he can change the first dropdown and the second dropdown is also changed.

For eample:

1.Choice

1.DD -> 123

2.DD -> 456 or 789

2. Choice - then he select

1. DD -> 456

2. DD -> 123 or 789

Could you create your scenario when I'm wrong.

Regards Mandy

Avatar

Level 2

Thanks Mandy

Yes that's correct

Ian Nicol

Narara Valley High School

Fountains Rd

Narara, 2250

Phone - 43293780

Avatar

Level 5

Hi Ian,

"my" scenario works correct with the script. Where is the problem?

Kind regards Mandy

Avatar

Level 2

Sorry for my poor explanation, I'll try to explain now that you have the form.

If I select, for example choice 1 flying fox, then pick High ropes in choice 2, then go back to choice 1 I am able replace flying fox with high ropes which means I can still get the person choosing the same things for both choices, which I was trying to avoid.

Thanks again and sorry for being a pain.

Ian Nicol

Narara Valley High School

Fountains Rd

Narara, 2250

Phone - 43293780

Avatar

Level 5

Hi Ian,

I come from germany and my english is very terrible. Sorry.

But I don't understand.

  1. Choice 1 you select - flying fox
  2. Choice 2 you select - High ropes
  3. Then Choice 1 - you select - Hight ropes
  4. And in this moment the Choice 2 would be reset automatically. It's not able that in Choice 1 and Choice 2 you have the same entry with this script! Never.

I can send you my pdf with my script. Perhaps you have a mistake in your pdf? Make you a accurate copy of "my" script or change you anything?

I try a little bit. When you delete the following script lines it's your scenario possible. Do you delete this?

DropdownListe2.addItem("Please select a value");
DropdownListe2.selectedIndex = 0;

Kind regards Mandy

Avatar

Level 2

Thanks Mandy that would be great

Ian Nicol

Narara Valley High School

Fountains Rd

Narara, 2250

Phone - 43293780

Avatar

Level 1

Hello Ian,

I might have a solution for you. It is based on the preOpen event and can be scaled to an arbitrary number of list elements and drop down lists.

You can download an example from my Acrobat.com workspace (click on the download button on the top left so save the file locally, as Acrobat.com won't display Designer/XFA documents in the browser).

The preOpen event is executed each time a user opens the list to make a selection and allows you to filter or add elements just before the list is shown. Because all subforms use the same code, I created a script object called "scoManageChoices".

PreOpen Event of each drop down list

scoManageChoices.restrictChoices(this);

Script Object "scoManageChoices"

// setup E4X XML variable containing viable choices

var choices = <choices>

    <choice>Canyoning</choice>

    <choice>Flying Fox</choice>

    <choice>High Ropes</choice>

    <choice>White Water Rafting</choice>

</choices>

function restrictChoices(dropdown) {

    // collect choices contained in other dropdowns

    var dropdowns = dropdown.all; // get all dropdowns with same name/hierarchy

    var otherChoices = []; // initialize empty array to save other choices

    for (var i = 0; i < dropdowns.length; i++) {

        var dd = dropdowns.item(i); // retrieve dropdown from list

        if (dd.isNull || dd == dropdown) continue; // skip empty or current dropdowns

        otherChoices.push(dd.rawValue); // save value of other non-empty dropdown into array

    }

    // fill current dropdown with choices

    dropdown.clearItems(); // reset current dropdown

    for each (var choice in choices.choice) { // loop through viable choices

        if (otherChoices.indexOf(choice.toString()) > -1) { // skip adding to dropdown list if other dropdown already selected the choice

            continue;

        }   

        dropdown.addItem(choice.toString()); // add to dropdown

    }

}

To make things easier in the script I placed all drop down lists within the same subform and gave all of them the same name, so that I can find them with the "all" property of the field (see the code example above).

I specified the viable choices in a format called E4X that is supported by Acrobat/Reader's Javascript engine and documented here (don't be scared by the deprecation notice, it continues to work in Acrobat/Reader).

Hope that helps,

Martin

Avatar

Level 2

Thanks  so much for your help it works fine. I was changing  DropdownListe2.addItem(""); to not allow the user to submit the form unless they chose a value from the dropdown box as it is a mandatory field. I will just use the original script, Thanks again.