Я понимаю, что вы ищете примеры методов с множественным выбором и примерами кода. Множественный выбор означает возможность выбора нескольких вариантов из списка или набора вариантов. Вот несколько методов и примеров кода на разных языках программирования:
-
HTML/JavaScript:
<select multiple> <option value="option1">Option 1</option> <option value="option2">Option 2</option> <option value="option3">Option 3</option> </select> -
jQuery:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <select id="mySelect" multiple> <option value="option1">Option 1</option> <option value="option2">Option 2</option> <option value="option3">Option 3</option> </select> <script> $(document).ready(function() { $('#mySelect').select2(); // Requires the Select2 library }); </script> -
Реагировать (с использованием библиотеки реакции-выбора):
import React from 'react'; import Select from 'react-select'; const options = [ { value: 'option1', label: 'Option 1' }, { value: 'option2', label: 'Option 2' }, { value: 'option3', label: 'Option 3' } ]; const MyComponent = () => { const [selectedOptions, setSelectedOptions] = React.useState([]); const handleSelectChange = (selected) => { setSelectedOptions(selected); }; return ( <Select isMulti options={options} value={selectedOptions} onChange={handleSelectChange} /> ); }; export default MyComponent; -
Angular (с использованием Angular Material):
<mat-form-field> <mat-label>Select options</mat-label> <mat-select multiple> <mat-option *ngFor="let option of options" [value]="option.value"> {{ option.label }} </mat-option> </mat-select> </mat-form-field> -
Vue.js (с использованием библиотеки vue-multiselect):
<template> <multiselect v-model="selectedOptions" :options="options" multiple></multiselect> </template> <script> import Multiselect from 'vue-multiselect'; export default { components: { Multiselect }, data() { return { selectedOptions: [], options: [ { value: 'option1', label: 'Option 1' }, { value: 'option2', label: 'Option 2' }, { value: 'option3', label: 'Option 3' } ] }; } }; </script>