hiding options in second drop down based on entries from first drop down.

replied on January 18, 2016

Hi Michael,

Depending on the length of your managers list, you may be able to get away with implementing the solution given in this Answers thread. Otherwise, the "more direct" route would involve some custom JavaScript; there is no simpler option given natively in Forms. I'll give this a think.

0 0

View 5 previous replies

replied on January 18, 2016

Actually, I think I've found something.

The following custom JavaScript works for two drop-down fields with the same elements in each list. The first is given the class "first-list" and the second is given the class "second-list". When a value is chosen in the first list, the option becomes disabled in the second list.

$(document).ready( function () {
  $('.first-list').on('blur','select',function(){
    var testval = $(this).val();
    $('.second-list option').each(function(){
      $(this).prop('disabled',false);
      if ($(this).val() == testval) {
        $(this).prop('disabled',true);
      }
    });
  });
});

Hope this helps!

0 0

replied on January 19, 2016 • Show version history

Hi James,

when i enter this script into the form it throws other scripted values out, ill log a support call for this.

Thanks for the prompt response.

0 0

replied on January 19, 2016 • Show version history

Hi Michael, this is not a Support Case issue yet.

With no other scripts and no other fields, I was able to get this to work. It sounds as though there is interference with the other scripts. Are there any classes shared among affected elements? Variable names among affected scripts?

If a cursory look does not reveal any such interference, could you please post your custom JavaScript either directly as a code block or, if prohibitively long, in a text file attached to a post?

If it turns out that there is no configuration problem, we will return to the Support case at that time to troubleshoot Forms.

Thanks!

0 0

replied on January 20, 2016

Hi James,

Noted thanks, i have gone though the script and cannot find what could be causing the issue.

i have attached a text file with the script in.

Script.txt (3.65 KB)

| Download

0 0

replied on January 22, 2016

Hi Michael,

I was able to look at your code. In the last code block, in the line which begins with "$('.first-list')", it is missing an opening curly brace at the end. If you add a "{" character so the full line is

$('.first-list').on('blur', 'select', function() {

then the problem may be resolved. Right now the syntax error would trump any logical errors.

Hope this helps!

0 0

replied on January 25, 2016

Hi James,

i gave this a swing but nothing blurs out in the second drop down.

i've gone with the above method, (adding a few more drop downs and put in a field rule to show them based on the first's value)

while we figure it out.

thanks for your help so far mate.

0 0

replied on January 25, 2016

Hi, Michael. I found another mistake in your attached script. In the very last if statement, you currently are looking to blur the option whose value corresponds to the variable "f", except no variable "f" has been defined. To remedy this, either change the variable name "testval" to "f", or fix the if statement to compare the option values to "testval" instead of "f".

0 0

SELECTED ANSWER

replied on February 9, 2016

Thank you James.

So ill put it all together.

First drop down CSS: "first-list"

Second drop down CSS: "second-list"

then the following script:

$(document).ready( function () {
$('.first-list').on('blur','select',function() {
var f = $(this).val();
$('.second-list option').each(function(){
$(this).prop('disabled',false);
if ($(this).val() == f) {
$(this).prop('disabled',true);
}
});
});
});

1 0

Question

Question

hiding options in second drop down based on entries from first drop down.

Answer

Replies

Sign in to reply to this post.