React, Vue and Svelte: Comparing Multi Select Binding

Multi Select Binding in...

Woo ! This is it. The end of this series. We've seen a lot of concepts to compare between these frameworks. Hope it helped people!

Check it out 🚀

React

Live Example

const [multiSelected, setMultiSelected] = useState<string[]>([
    'Frontend Developer',
]);
const handleMultiSelected = (options: any) => {
let selectedOptions = [...options]
    .map((option) => option.value)
    .reduce((prev, current) => [prev, ', ', current]);

setMultiSelected(selectedOptions);
};

<section>
    <h2>Multi Select</h2>
    <select multiple style={{ width: '100px' }} onChange={(e)=> handleMultiSelected(e.target.selectedOptions)}
        >
        <option>Frontend Developer</option>
        <option>Backend Developer</option>
        <option>Fullstack Developer</option>
    </select>
    <p>Selected: {multiSelected}</p>
</section>

Vue

Live Example

const multiSelected = ref(['Frontend']);

<section>
    <h2>Multi Select</h2>
    <select v-model="multiSelected" multiple style="width: 100px">
        <option>Frontend Developer</option>
        <option>Backend Developer</option>
        <option>Fullstack Developer</option>
    </select>
    <p>Selected: {{ multiSelected }}</p>
</section>

Svelte

Live Example

let multiSelected: string[] = ['Frontend Developer'];

<section>
    <h2>Multi Select</h2>
    <select bind:value={multiSelected} multiple style="width: 100px">
        <option>Frontend Developer</option>
        <option>Backend Developer</option>
        <option>Fullstack Developer</option>
    </select>
    <p>Selected: {multiSelected}</p>
</section>