inputs.select onchange event

Hi there,

I’m using inputs.select but would like to add an onchange function to it that runs every time the selection is changed. Is this possible?

I’m not going to show my example as it’s a bit of dogs breakfast at the moment, but basically I wan’t to run a mapbox flyto function, as well as container.dispatchEvent(new CustomEvent("input", { bubbles: true })) once the map has centered on the new location.

1 Like

The objective you describe is pretty much what I do in this notebook. The basic format of the code is

{
  let menu = Inputs.select(choices, {...} );
  d3.select(menu).on('input', function() {
     do stuff with map
  })
  return menu
}

I wrote that a couple of years ago, though, and have grown to better appreciate Observable’s reactive approach where you might have

// Input cell
viewof menu = Inputs.select(choices, {...})

and then

// cell that defines map with an update method attached

and finally

// cell that depends on menu and calls map.update(menu)

The map, incidentally, is embedded here:

3 Likes