React

by gbos

HTML

<div id="app"></div>

CSS

body {
    padding: 30px;
    margin: 0;
}


select[multiple] {
    -webkit-appearance: none;
    width: 100%;
    background-color: white;
    border-color: black;
    
}

React

const Select = () => {
  
  const [val, setVal] = React.useState([]);
  
  const onChange = (v) => val.indexOf(v) !== -1 ? setVal(val.filter(a => a != v)) : setVal([...val, v]);
  
  return <React.Fragment>
  
  <hr/>
  
  <select multiple value={val} onChange={(e)=>onChange(e.target.value)}>
    <option value="1">111</option>
    <option value="2">222</option>
    <option value="3">333</option>
    <option value="4">444</option>
    <option value="5">555</option>
    <option value="6">666</option>
    
    
    
  </select>
  
  </React.Fragment>;
  
};




ReactDOM.render(<Select/>, document.querySelector("#app"));