58 lines
1.4 KiB
JavaScript
58 lines
1.4 KiB
JavaScript
|
import * as React from 'react';
|
||
|
|
import InputLabel from '@mui/material/InputLabel';
|
||
|
|
import FormControl from '@mui/material/FormControl';
|
||
|
|
import Select from '@mui/material/Select';
|
||
|
|
|
||
|
|
const names = [
|
||
|
|
'Oliver Hansen',
|
||
|
|
'Van Henry',
|
||
|
|
'April Tucker',
|
||
|
|
'Ralph Hubbard',
|
||
|
|
'Omar Alexander',
|
||
|
|
'Carlos Abbott',
|
||
|
|
'Miriam Wagner',
|
||
|
|
'Bradley Wilkerson',
|
||
|
|
'Virginia Andrews',
|
||
|
|
'Kelly Snyder',
|
||
|
|
];
|
||
|
|
|
||
|
|
export default function MultipleSelectNative() {
|
||
|
|
const [personName, setPersonName] = React.useState([]);
|
||
|
|
const handleChangeMultiple = (event) => {
|
||
|
|
const { options } = event.target;
|
||
|
|
const value = [];
|
||
|
|
for (let i = 0, l = options.length; i < l; i += 1) {
|
||
|
|
if (options[i].selected) {
|
||
|
|
value.push(options[i].value);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
setPersonName(value);
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<FormControl sx={{ m: 1, minWidth: 120, maxWidth: 300 }}>
|
||
|
|
<InputLabel shrink htmlFor="select-multiple-native">
|
||
|
|
Native
|
||
|
|
</InputLabel>
|
||
|
|
<Select
|
||
|
|
multiple
|
||
|
|
native
|
||
|
|
value={personName}
|
||
|
|
onChange={handleChangeMultiple}
|
||
|
|
label="Native"
|
||
|
|
inputProps={{
|
||
|
|
id: 'select-multiple-native',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{names.map((name) => (
|
||
|
|
<option key={name} value={name}>
|
||
|
|
{name}
|
||
|
|
</option>
|
||
|
|
))}
|
||
|
|
</Select>
|
||
|
|
</FormControl>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|