getValue() from second order ui.Select in Google Earth Engine

Question

I would like two make two ui.Select widgets. The items of second ui.Select depends on first ui.Select. Then I would like to get values of both ui.Selects using ui.Button. I have drafted a code, but it does not work as I want. When I click the button, it gets the value of first ui.Select and prints it, but ignores the second ui.Select's value. Is anyone can help me improve the code and give an suggest how can I make it?

https://code.earthengine.google.com/1796c9feaca7638dc195f52850bca64c

var panel = ui.Panel();
panel.style().set({width: '200px', position: 'bottom-right'});
ui.root.add(panel);

var firstname_select = ui.Select({
  items: [{label:'AAA', value:'AAA'}, {label:'BBB', value:'BBB'}, {label:'CCC', value:'CCC'}],
  onChange: function() {

    if (firstname_select.getValue() === 'AAA'){
      var secondname_select = ui.Select({
        items: [
        {label:'A1', value:'A1'}, {label:'A2', value:'A2'}, {label:'A3', value:'A3'}],
        onChange: function() {
        }
      });
    }

    if (firstname_select.getValue() === 'BBB'){
      var secondname_select = ui.Select({
        items: [
        {label:'B1', value:'B1'}, {label:'B2', value:'B2'}, {label:'B3', value:'B3'}],
        onChange: function() {
        }
      });
    }

    if (firstname_select.getValue() === 'CCC'){
      var secondname_select = ui.Select({
        items: [
        {label:'C1', value:'C1'}, {label:'C2', value:'C2'}, {label:'C3', value:'C3'}],
        onChange: function() {
        }
      });
    }    
    panel.widgets().set(1, secondname_select);
  }

  });

var getvalue = ui.Button({
  label: 'Get Values',
  onClick: function() {
    print('First: ' + firstname_select.getValue());
    print('Select: ' + secondname_select.getValue());
  }
});

var secondname_select = ui.Select();
panel.widgets().set(1, firstname_select);
panel.widgets().set(2, secondname_select);
panel.widgets().set(3, getvalue);

Answer 1

The secondname_select the button uses to extract the value always point to your initial, empty, ui.Select instance. When firstname_select change, you create a local variable, also named secondname_select. The button still see the initial, empty, instance. To solve this, you can reassign the initial secondname_select by just removing the var keyword in your firstname_select change callback.

var panel = ui.Panel();
panel.style().set({width: '200px', position: 'bottom-right'});
ui.root.add(panel);


var firstname_select = ui.Select({
  items: [{label:'AAA', value:'AAA'}, {label:'BBB', value:'BBB'}, {label:'CCC', value:'CCC'}],
  onChange: function() {

    if (firstname_select.getValue() === 'AAA'){
      secondname_select = ui.Select({
        items: [
        {label:'A1', value:'A1'}, {label:'A2', value:'A2'}, {label:'A3', value:'A3'}],
        onChange: function() {
        }
      });
    }

    if (firstname_select.getValue() === 'BBB'){
      secondname_select = ui.Select({
        items: [
        {label:'B1', value:'B1'}, {label:'B2', value:'B2'}, {label:'B3', value:'B3'}],
        onChange: function() {
        }
      });
    }

    if (firstname_select.getValue() === 'CCC'){
      secondname_select = ui.Select({
        items: [
        {label:'C1', value:'C1'}, {label:'C2', value:'C2'}, {label:'C3', value:'C3'}],
        onChange: function() {
        }
      });
    }    
    panel.widgets().set(1, secondname_select);
  }

  });


var getvalue = ui.Button({
  label: 'Get Values',
  onClick: function() {
    print('First: ' + firstname_select.getValue());
    print('Select: ' + secondname_select.getValue());
  }
});

var secondname_select = ui.Select();
panel.widgets().set(1, firstname_select);
panel.widgets().set(2, secondname_select);
panel.widgets().set(3, getvalue);

https://code.earthengine.google.com/3c2ea0753457c7a7bd18ca650f5404ae

Answer 2

I think the problem is that there are 2 ui.Select widgets named secondname_select in your code. First one you defined globally as panel.widgets().set(2, secondname_select);, which is empty. And a second one is created on the fly inside your function as panel.widgets().set(1, secondname_select);

Then onClick event of your getValue button queries the first secondname_select that is empty.

One possible way to fix it is to query the right one:

var getvalue = ui.Button({
  label: 'Get Values',
  onClick: function() {
    print('First: ' + firstname_select.getValue());
    print('Second: ' + panel.widgets().get(1).getValue());
  }
});