The Future of Select Components

<!-- Single Select with Custom Theme -->
    <label for="custom-demo-select" class="form-label">Choose Your Mood:</label>
    <select id="custom-demo-select" class="form-control custom-select-theme">
        <option value="">How are you feeling today?</option>
        <option value="happy" data-icon="😊">Happy</option>
        <option value="excited" data-icon="🥳">Excited</option>
        <option value="calm" data-icon="😌">Calm</option>
        <option value="focused" data-icon="🧠">Focused</option>
        <option value="tired" data-icon="😴">Tired</option>
        <option value="inspired" data-icon="💡">Inspired</option>
        <option value="creative" data-icon="🎨">Creative</option>
    </select>

    <!-- Multi Select with Custom Theme -->
    <label for="custom-demo-select-multi" class="form-label">Choose Your Activities:</label>
    <select id="custom-demo-select-multi" class="form-control custom-select-theme" multiple>
        <option value="coding" data-icon="💻">Coding</option>
        <option value="reading" data-icon="📚">Reading</option>
        <option value="gaming" data-icon="🎮">Gaming</option>
        <option value="exercising" data-icon="🏃">Exercising</option>
        <option value="cooking" data-icon="🍳">Cooking</option>
        <option value="music" data-icon="🎵">Music</option>
        <option value="art" data-icon="🎨">Art</option>
    </select>

// Initialize single select with custom theme
    $('#custom-demo-select').select3({
        placeholder: 'How are you feeling today?',
        searchable: true,
        theme: 'custom-purple'
    });

    // Initialize multi select with custom theme
    $('#custom-demo-select-multi').select3({
        placeholder: 'Select your activities',
        searchable: true,
        selectAll: true,
        clearAll: true,
        theme: 'custom-purple'
    });

/* Custom Purple Theme for Select3 */
    .select3-container.custom-purple .select3-dropdown {
        border-color: #8A2BE2;
        box-shadow: 0 0 0 0.25rem rgba(138, 43, 226, 0.25);
    }

    .select3-container.custom-purple .select3-selection {
        border-color: #8A2BE2;
        background: linear-gradient(to right, rgba(138, 43, 226, 0.05), rgba(138, 43, 226, 0.1));
    }

    .select3-container.custom-purple .select3-selection:hover {
        border-color: #9370DB;
    }

    .select3-container.custom-purple.select3-focus .select3-selection {
        border-color: #8A2BE2;
        box-shadow: 0 0 0 0.25rem rgba(138, 43, 226, 0.25);
    }

    /* Customize the selected items */
    .select3-container.custom-purple .select3-tag {
        background-color: #8A2BE2;
        border-color: #8A2BE2;
        color: #fff;
    }

    .select3-container.custom-purple .select3-tag:hover {
        background-color: #9370DB;
    }

    /* Customize the dropdown items */
    .select3-container.custom-purple .select3-option:hover,
    .select3-container.custom-purple .select3-option.select3-option-highlighted {
        background-color: rgba(138, 43, 226, 0.1);
    }

    .select3-container.custom-purple .select3-option.select3-option-selected {
        background-color: rgba(138, 43, 226, 0.2);
        color: #8A2BE2;
    }

    /* Customize action buttons */
    .select3-container.custom-purple .select3-actions .select3-select-all,
    .select3-container.custom-purple .select3-actions .select3-clear-all {
        color: #8A2BE2;
    }

    .select3-container.custom-purple .select3-actions .select3-select-all:hover,
    .select3-container.custom-purple .select3-actions .select3-clear-all:hover {
        text-decoration: none;
        color: #9370DB;
    }

<!-- HTML Content Options -->
<select id="html-basic-select" class="form-control">
    <option value="">Choose a team member...</option>
    <option value="john" data-html="<strong>John Doe</strong><br><small class='text-muted'><i class='bi bi-code-slash'></i> Lead Developer</small>">John Doe</option>
    <option value="jane" data-html="<strong>Jane Smith</strong><br><small class='text-muted'><i class='bi bi-palette'></i> UI/UX Designer</small>">Jane Smith</option>
</select>

<!-- Template-based Options -->
<select id="html-template-select" class="form-control" multiple>
    <option value="1">Sarah Johnson</option>
    <option value="2">Michael Chen</option>
    <option value="3">Emma Davis</option>
</select>

// HTML Content with data-html attribute
$('#html-basic-select').asSelect3({
    allowHtml: true,
    placeholder: 'Choose a team member...',
    searchable: true
});

// Custom Templates
$('#html-template-select').asSelect3({
    placeholder: 'Select users...',
    templateResult: function(data) {
        if (!data.id) return data.text;
        
        const avatarUrl = `https://i.pravatar.cc/150?u=${data.id}`;
        return `<div class="d-flex align-items-center">
                  <img src="${avatarUrl}" alt="${data.text}" width="32" height="32" class="rounded-circle me-2">
                  <div>
                    <div class="fw-semibold">${data.text}</div>
                    <small class="text-muted">ID: ${data.id} • Online</small>
                  </div>
                </div>`;
    },
    templateSelection: function(data) {
        if (!data.id) return data.text;
        
        const avatarUrl = `https://i.pravatar.cc/150?u=${data.id}`;
        return `<div class="d-flex align-items-center">
                  <img src="${avatarUrl}" alt="${data.text}" width="20" height="20" class="rounded-circle me-1">
                  <span>${data.text}</span>
                </div>`;
    }
});