It's a matter of updating the second dropdown options when the first dropdown changes. Something like this:
var India = ee.FeatureCollection([ // You didn't provide your features - making up some dummy ones
ee.Feature(null, {NAME_1: 'State 1', NAME_2: 'District 1.1'}),
ee.Feature(null, {NAME_1: 'State 1', NAME_2: 'District 1.2'}),
ee.Feature(null, {NAME_1: 'State 1', NAME_2: 'District 1.3'}),
ee.Feature(null, {NAME_1: 'State 2', NAME_2: 'District 2.1'}),
ee.Feature(null, {NAME_1: 'State 2', NAME_2: 'District 2.2'}),
ee.Feature(null, {NAME_1: 'State 2', NAME_2: 'District 2.3'}),
ee.Feature(null, {NAME_1: 'State 3', NAME_2: 'District 3.1'}),
ee.Feature(null, {NAME_1: 'State 3', NAME_2: 'District 3.2'}),
ee.Feature(null, {NAME_1: 'State 3', NAME_2: 'District 3.3'}),
])
var statesDropdown = ui.Select({
placeholder: 'Loading states...',
disabled: true,
onChange: onStateChange
})
updateStates()
var districtsDropdown = ui.Select({
placeholder: 'First select a state',
disabled: true,
onChange: onDistrictChange
})
var panel = ui.Panel({
widgets: [statesDropdown, districtsDropdown],
style: {
backgroundColor: 'white'
},
layout: ui.Panel.Layout.flow('vertical')
})
ui.root.insert(1, panel)
function onStateChange(stateId) {
var districts = India.filter(ee.Filter.eq('NAME_1', stateId))
updateDistricts(stateId, districts)
addStateLayer(stateId, districts)
}
function onDistrictChange(districtId) {
var district = India.filter(ee.Filter.eq('NAME_2', districtId))
.first()
print('selected district', district)
}
function updateStates() {
ee.List(India.aggregate_array('NAME_1'))
.distinct()
.evaluate(function(states) {
statesDropdown.items().reset(states)
statesDropdown.setPlaceholder('Select State')
statesDropdown.setDisabled(false)
})
}
function updateDistricts(stateId, state) {
// Before districts have loaded
districtsDropdown.items().reset([])
districtsDropdown.setPlaceholder('Loading districts...')
districtsDropdown.setDisabled(true)
state
.aggregate_array('NAME_2')
.evaluate(function(districts) {
// After districts have loaded
districtsDropdown.items().reset(districts)
districtsDropdown.setPlaceholder('Select District')
districtsDropdown.setDisabled(false)
})
}
function addStateLayer(stateId, districts) {
Map.clear()
Map.centerObject(districts, 7)
Map.addLayer(districts, {}, stateId)
}
https://code.earthengine.google.com/e474a44ca84553570e11cba1436664b8