As-Select3 Examples

Basic Example

Select an option:


$('#basic-select').asSelect3({
    placeholder: 'Choose an option...',
    searchable: true
});

Multiple Selection

Select multiple options:


$('#multi-select').asSelect3({
    placeholder: 'Choose options...',
    searchable: true,
    selectAll: true,
    clearAll: true
});

Preselected Value

Select with preselected value:


$('#preselected-select').asSelect3({
    searchable: true
});

With Icons

Select with icons:


$('#icon-select').asSelect3({
    placeholder: 'Select a language...',
    searchable: true
});

Remote Data Loading

Select a US state:


$('#remote-select').asSelect3({
    placeholder: 'Select a state...',
    searchable: true,
    remote: function(query) {
        return fetchStates(query);
    }
});

Max Selection Limit

Select up to 3 options:


$('#max-select').asSelect3({
    placeholder: 'Choose up to 3 options...',
    searchable: true,
    maxSelection: 3,
    selectAll: true,
    clearAll: true
});

Placeholder with Search

Search with placeholder:


$('#placeholder-select').asSelect3({
    placeholder: 'Search for a fruit...',
    searchable: true
});

User Profiles with Avatars

Select team members:


$('#profile-demo-select').asSelect3({
    placeholder: 'Select team members',
    imageWidth: 36,
    imageHeight: 36,
    imageBorderRadius: '50%',
    imagePosition: 'left',
    searchable: true
});

HTML Rendering & Templates NEW v1.4

Rich HTML content and custom templates for advanced formatting

Team Members (HTML Content):

Products (Custom Templates):


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

// Custom Templates with dynamic content
$('#template-demo-select').asSelect3({
    placeholder: 'Select products...',
    templateResult: function(data) {
        if (!data.id) return data.text;
        
        const products = {
            laptop: { image: 'https://images.unsplash.com/photo-1496181133206-80ce9b88a853?w=100&h=100&fit=crop', price: '$1,299' },
            phone: { image: 'https://images.unsplash.com/photo-1511707171634-5f897ff02aa9?w=100&h=100&fit=crop', price: '$899' },
            tablet: { image: 'https://images.unsplash.com/photo-1544244015-0df4b3ffc6b0?w=100&h=100&fit=crop', price: '$649' },
            headphones: { image: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=100&h=100&fit=crop', price: '$299' }
        };
        
        const product = products[data.id];
        if (!product) return data.text;
        
        return `<div class="d-flex align-items-center">
                  <img src="${product.image}" alt="${data.text}" width="50" height="50" class="rounded me-2">
                  <div>
                    <div class="fw-semibold">${data.text}</div>
                    <small class="text-success">${product.price}</small>
                  </div>
                </div>`;
    }
});

Manual Reinitialize

Select a framework:

Click "Add Option" to add a new framework to the DOM, then "Reinitialize" to update the dropdown.


// Add new option to original select
$('#my-select').append('<option value="nextjs">Next.js</option>');

// Reinitialize to show new options
const instance = $('#my-select')[0]._asSelect3;
const newInstance = instance.reinitializeFromDOM();