select2 related fields dependencies

select2 related fields dependencies

dan@19ideas.comdan@19ideas.com Posts: 56Questions: 13Answers: 1

I tried to initialize an editor pop up, with two select2 fields. Can someone show me how to select an option from the first select2 field, to automatically change the value of the second select2 field?

like if I have in my editor:

   .....
        label: "Units:",
        name: "Unit",
        type: "select2",
        def: 'Imp',
        options: [
          { label: "Imperial", value: "Imp" },
          { label: "International", value: "Int" }
        ]
      },
      {
        label: "Frequency:",
        name: "Frequency",
        type: "select2",
        def: 60,
        options: [
          { label: "50 Hz", value: 50 },
          { label: "60 Hz", value: 60 },
        ]
      },
   .....

If I selected the Unit to be value of Imp, then Frequency would be automatically selected at 60. If the Unit is selected as Int, the Frequency would be selected at 50.

I tried to use dependent:

  _editor.dependent('Unit', function (val, data, callback) {
            .....
            console.log("am I hit?");   // never reaches this code when selecting an option in the Unit drop down
  });

But it doesn't work.

This question has an accepted answers - jump to answer

Answers

  • dan@19ideas.comdan@19ideas.com Posts: 56Questions: 13Answers: 1
    edited July 2018 Answer ✓

    Wow, took me 2 hours to figure out, and as soon as I posted, I got the answer immediately:

     ....
     label: "Units:",
     name: "Unit",
     data: "Unit",      //  need to add this, to get dependent to work
     type: "select2",
     def: 'Imp',
     options: [
          { label: "Imperial", value: "Imp" },
          { label: "International", value: "Int" }
       ]
     },
    
      //Then follow the logic to getting the second select2 to switch
      _editor.dependent('Unit', function (val, data, callback) {
        var _freq = 50;
    
        switch (val) {
          case "Imp":
          case "Im2":
          case "Im3":
            _freq = 60;
            break;
          case "Int":
          case "In2":
            _freq = 50;
            break;
        }
    
        return {
          "values": {
            "Frequency": _freq
          }
        };
      });
    
  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin

    Heh - that's the way it goes. Good to hear you've got it sorted now.

    Allan

  • dan@19ideas.comdan@19ideas.com Posts: 56Questions: 13Answers: 1

    Yeh, I didn't see the "data" property as an attribute for an editor field, I actually found this out from another user who posted a similar question last year about two select2 field types, but he was further down the problem space than I was.

This discussion has been closed.