4

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);

2 Answers 2

6

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

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());
  }
}); 
2
  • [panel.widgets(...).get(...).getValue is not a function], I received such error for this query Apr 1, 2020 at 10:18
  • 1
    Sorry, I forgot to change the widget index. Fixed it. Also, here's the code on EE
    – Basile
    Apr 1, 2020 at 10:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.