31:T423,function menu() { let id; let labelText; let options; const listeners = d3.dispatch('change'); const menu = (selection) => { selection .selectAll('label') .data([null]) .join('label') .attr('for', id) .text(labelText); selection .selectAll('select') .data([null]) .join('select') .attr('id', id) .on('change', (event) => { listeners.call('change', null, event.target.value); }) .selectAll('option') .data(options) .join('option') .attr('value', (d) => d.value) .text((d) => d.text); }; menu.id = function (_) { return arguments.length ? ((id = _), menu) : id; } menu.labelText = function (_) { return arguments.length ? ((labelText = _), menu) : labelText; } menu.options = function (_) { return arguments.length ? ((options = _), menu) : options; } menu.on = function () { let value = listeners.on.apply(listeners, arguments); return value === listeners ? menu : value; }; return menu; }32:[] 2f:{"title":"Reusable HTML select","cells":[{"id":0,"value":"# Reusable HTML select","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"```html\nChoose a car:\n\n\n```","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"{\n const menuContainer = d3.create('div')\n .attr('class', 'menu-container');\n const carMenu = menuContainer.append('div');\n\n const options = [\n { value: 'volvo', text: 'Volvo' }, \n { value: 'saab', text: 'Saab' }, \n { value: 'mercedes', text: 'Mercedes' }, \n { value: 'audi', text: 'Audi' }\n ];\n \n carMenu.call(\n menu()\n .id('car-menu')\n .labelText('Car: ')\n .options(options)\n .on('change', (value) => {\n console.log(`You selected: ${value}`);\n })\n );\n \n return menuContainer.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"","pinned":false,"hidden":false,"mode":"html"}],"files":"$W32","stdlib":"1","titling":"auto"}