Multi-SelectBox JS Demo

Demo 1: Basic Multi-Select

Basic multi-select with search functionality and keyboard navigation.

Instructions: Type to search, use arrow keys to navigate, press Enter to select, or click on options.

HTML & JavaScript Code

<select id="demo1" multiple>
    <option value="javascript">JavaScript</option>
    <option value="python">Python</option>
    <option value="java">Java</option>
    <option value="cpp">C++</option>
    <option value="csharp">C#</option>
    <option value="php">PHP</option>
    <option value="ruby">Ruby</option>
    <option value="go">Go</option>
    <option value="rust">Rust</option>
    <option value="swift">Swift</option>
</select>

<!-- Include via NPM (after npm install multi-selectbox-js) -->
<script src="node_modules/multi-selectbox-js/dist/multi-selectbox-js.js"></script>

<!-- Or include via CDN -->
<!-- <script src="https://unpkg.com/multi-selectbox-js@1.2.0/dist/multi-selectbox-js.js"></script> -->

<script>
    const demo1 = new MultiSelectBox('demo1', {
        placeholder: 'Select programming languages...'
    });
</script>

Demo 2: Limited Display Tags

Shows only 1 tag with a "+ X more" indicator for additional selections. Click the "+ X more" to view and manage all selected tags.

Instructions: Select multiple countries and notice how only 1 tag is shown with a "+ X more" indicator. Click the "+ X more" indicator to see all selected tags and remove them individually.

HTML & JavaScript Code

<select id="demo2" multiple>
    <option value="india">India</option>
    <option value="usa">United States</option>
    <option value="uk">United Kingdom</option>
    <option value="canada">Canada</option>
    <option value="australia">Australia</option>
    <option value="germany">Germany</option>
    <option value="france">France</option>
    <option value="japan">Japan</option>
    <option value="brazil">Brazil</option>
    <option value="china">China</option>
</select>

<!-- Include via NPM (after npm install multi-selectbox-js) -->
<script src="node_modules/multi-selectbox-js/dist/multi-selectbox-js.js"></script>

<!-- Or include via CDN -->
<!-- <script src="https://unpkg.com/multi-selectbox-js@1.2.0/dist/multi-selectbox-js.js"></script> -->

<script>
    const demo2 = new MultiSelectBox('demo2', {
        maxDisplayTags: 1,
        placeholder: 'Select countries...'
    });
</script>

Demo 3: Smart "All" Option

Demonstrates the new "All" option functionality with custom text and automatic management.

Instructions: This demo shows the new "All" option feature. The "Select All Technologies" option will automatically select all items, and selecting individual items will manage the "All" state intelligently.

Select Technologies:

HTML & JavaScript Code

<select id="demo3" name="demo3" multiple>
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="javascript">JavaScript</option>
    <option value="python">Python</option>
    <option value="java">Java</option>
    <option value="php">PHP</option>
</select>

<!-- Include via NPM (after npm install multi-selectbox-js) -->
<script src="node_modules/multi-selectbox-js/dist/multi-selectbox-js.js"></script>

<!-- Or include via CDN -->
<!-- <script src="https://unpkg.com/multi-selectbox-js@1.2.0/dist/multi-selectbox-js.js"></script> -->

<script>
    const demo3 = new MultiSelectBox('demo3', {
        maxDisplayTags: 3,
        placeholder: 'Select technologies...',
        addAllOption: true,
        allOptionText: 'Select All Technologies',
    });
</script>

Demo 4: Custom Colors

Interactive configuration panel to customize all MultiSelectBox properties and see live changes.

Instructions: Use the configuration panel below to customize the MultiSelectBox properties. Click "Apply" to see live changes, or "Reset" to restore default values.

Configuration Panel

maxDisplayTags:

placeholder:

addAllOption:

allOptionText:

tagBackground:

tagText:

moreIndicatorBackground:

moreIndicatorText:

HTML & JavaScript Code

<select id="demo4" multiple>
    <option value="red">Red</option>
    <option value="blue">Blue</option>
    <option value="green">Green</option>
    <option value="yellow">Yellow</option>
    <option value="purple">Purple</option>
    <option value="orange">Orange</option>
    <option value="pink">Pink</option>
    <option value="brown">Brown</option>
</select>

<!-- Include via NPM (after npm install multi-selectbox-js) -->
<script src="node_modules/multi-selectbox-js/dist/multi-selectbox-js.js"></script>

<!-- Or include via CDN -->
<!-- <script src="https://unpkg.com/multi-selectbox-js@1.2.0/dist/multi-selectbox-js.js"></script> -->

<script>
    const demo4 = new MultiSelectBox('demo4', {
        maxDisplayTags: 2,
        placeholder: 'Select colors...',
        addAllOption: true,
        allOptionText: 'Select All Colors',
        colors: {
            tagBackground: '#FF6B6B',
            tagText: '#ffffff',
            moreIndicatorBackground: '#4ECDC4',
            moreIndicatorText: '#ffffff'
        }
    });
</script>

Demo 5: Form Submission Test

Test form submission with multiple select boxes to ensure all selected values are properly sent as arrays.

Instructions: Select multiple items from each dropdown, then click "Submit Form" to see how the data would be sent to the backend. This demonstrates that all selected values are properly sent as arrays.

Select Countries:

Select Programming Languages:

Select Frameworks:

Multi-SelectBox JS Demo

Demo 1: Basic Multi-Select

HTML & JavaScript Code

Demo 2: Limited Display Tags

HTML & JavaScript Code

Demo 3: Smart "All" Option

HTML & JavaScript Code

Demo 4: Custom Colors

Configuration Panel

HTML & JavaScript Code

Demo 5: Form Submission Test

Form Data That Would Be Sent to Backend:

Individual Select Box Data: