Dropdown value based on other dropdown field value selection

  • Resolved Orange Moose

    (@sarunasm)


    4 years, 7 months ago

    I have a form with several dropdowns.

    Dropdown 1 has 4 options.

    I want to be able to set options of Dropdown 2 based on what was selected on Dropdown 1.

    What is the best way to approach this?

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author codepeople

    (@codepeople)

    4 years, 7 months ago

    Hello @sarunasm

    Thank you very much for using our plugin. We have described the different alternatives to populate a second list based on the choice selected by the user in the main list in the following thread of the forum:

    https://ww.wp.xz.cn/support/topic/adding-custom-dependencies/

    Best regards.

    Thread Starter Orange Moose

    (@sarunasm)

    4 years, 7 months ago

    Hi, @codepeople I’ll look into that and see if I need further assistance.

    Thanks, for the very fast answer.

    Thread Starter Orange Moose

    (@sarunasm)

    4 years, 7 months ago

    I see that solution you provided is about field population and not suitable in my case.

    I’ll try to clarify below:

    I want to calculate transportation cost by Vehicle type and Destination.

    Dropdown 1 has vehicle types: Motorcycle, Sedan, Truck

    Dropdown 2 has Destinations: New York, California, Chicago, etc.

    I want to set Dropdown 2 option values based on Vehicle type selected in Dropdown 1.

    Example:

    if(Dropdown 1 === “Motorcycle” && Dropdown 2 === “New York”) { New York value === 150 }
    if(Dropdown 1 === “Sedan” && Dropdown 2 === “New York”) { New York value === 200 }
    if(Dropdown 1 === “Truck” && Dropdown 2 === “New York”) { New York value === 300 }

    if(Dropdown 1 === “Motorcycle” && Dropdown 2 === “California”) { New York value === 160 }
    if(Dropdown 1 === “Sedan” && Dropdown 2 === “California”) { New York value === 210 }
    if(Dropdown 1 === “Truck” && Dropdown 2 === “California”) { New York value === 310 }

    etc.

    • This reply was modified 4 years, 7 months ago by Orange Moose.
    Plugin Author codepeople

    (@codepeople)

    4 years, 7 months ago

    Hello @sarunasm

    My apologies for the confusion.

    In this case, you have some alternatives, you can use multiple conditional statements in the calculated field to determine the price, or you can use an object with the corresponding values to optimize and simplify the code.

    Assuming the vehicles list is the fieldname1 and destinations the fieldname2.

    The first alternative for the calculated field that determines the price would be similar to:

    (function(){
if(fieldname1 == "Motorcycle" && fieldname2 == "New York") return 150;
if(fieldname1 == "Sedan" && fieldname2 == "New York") return 200;
if(fieldname1 == "Truck" && fieldname2 == "New York") return 300;

if(fieldname1 == "Motorcycle" && fieldname2 == "California") return 160;
if(fieldname1 == "Sedan" && fieldname2 == "California") return 210;
if(fieldname1 == "Truck" && fieldname2 == "California") return 310;
})()

    Second alternative, using an object with the information:

    (function(){
var db = {
"Motorcycle" : {"New York": 150, "California": 160},
"Sedan" : {"New York": 200, "California": 210},
"Truck" : {"New York": 300, "California": 310},
};
return db[fieldname1][fieldname2];
})()

    Both options have the handicap to edit the equations every time you change a vehicle, destination, or price.

    If you use DS fields, all this information can be stored into a CSV file with the structure:

    vehicle,destinatio,price
"Motorcycle","New York,150
"Sedan","New York",200
"Truck","New York",300
"Motorcycle","California",160
"Sedan","California",210
"Truck","California",310

    And populate two DropDown DS fields with the lists of vehicles and destinations, and a Currency DS or Hidden DS field with the corresponding price. This alternative allows you to modify the data without editing the form.

    https://cff.dwbooster.com/blog/2019/02/14/ds/

    Best regards.

    Thread Starter Orange Moose

    (@sarunasm)

    4 years, 7 months ago

    Thanks, this could work.

    I want to test the second alternative.
    Where should I put the iffe code?

    (function(){
var db = {
"Motorcycle" : {"New York": 150, "California": 160},
"Sedan" : {"New York": 200, "California": 210},
"Truck" : {"New York": 300, "California": 310},
};
return db[fieldname1][fieldname2];
})()

    I have about 300 destinations, if this solution works, I think I’ll consider Pro version too 🙂

    • This reply was modified 4 years, 7 months ago by Orange Moose.
    Plugin Author codepeople

    (@codepeople)

    4 years, 7 months ago

    Hello @sarunasm

    The equations are entered into the “Set Equation” attribute in the calculated fields’ settings.

    So, you must insert a calculated field in the form and enter the equation through its settings.

    Best regards.

    Thread Starter Orange Moose

    (@sarunasm)

    4 years, 7 months ago

    Great.

    Thanks for amazing support.

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Dropdown value based on other dropdown field value selection’ is closed to new replies.