3

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

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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