Add options to SelectMulti control

[infostar31]

Hello,

I'm using a SelectMulti control with a SelectFulltext and two SelectPopup controls. I have 2 questions :

1- At the end of the SelectMulti control there is the OK button. How can I add a Cancel button to unselect the selected features from the Selectmulti control ? Or add the option of clearing the selection on clickout ?

2- For the selectPopup controls, I have a selection by 'State' property and by 'City' property. So is there a solution to connect them so thaht when I choose a State at the first selectpopup, only the Cities of that State are shown in the list of the second Selectpopup ?

I hope that my two issues are clear.

Thank you for helping !

[Viglino]

1- You can access the control element to add a new button:

selectCtrl.element.querySelector('DIV').appendChild(document.createElement('BUTTON'))

2- You have to implement your own control..

var select1 =     new ol.control.SelectPopup({
    defaultLabel: 'all',
    label: 'State:',
    property: 'state'
 })
var select2 =     new ol.control.SelectPopup({
    defaultLabel: 'all',
    label: 'City:',
    property: 'city'
 })

var selectCtrl = new ol.control.SelectMulti({
  controls: [
     select1,
     select2
  ]
})

// Event on select1
select1.element.querySelector('SELECT').addEventListener('change', function(e) {
  var state = e.target.value
  // Set city
  select2.setValues({
    values: getCityByState(state)
  })
})

[infostar31]

Thank You M. Viglino, I will add it and get you the feed back.

1- I already added the button but the clearing function doesn't delete the selections on the SelectMulti control. I want it to execute the Clickout funtion (just like the overlay PopupFeature, when we click out the selection is cleared), but I saw that Selectmulti works with feature collection and I'm stucked there.

2- I will try your solution and give you the feed back.

Thanks a lot