Select3 methods

Method Returns Description
val() string / array Retrieves current value of select. Returns array of strings if select has multiple attribute, else returns a string.
open() N / A Opens select.
close() N / A Closes select.

val()

Try selecting different options and clicking the button.

HTML

<div class="left">
    <label for="method-val-single">Single select</label>
    <select id="method-val-single">
        <option value="option-1" selected="selected">Option 1</option>
        <option value="option-2">Option 2</option>
        <option value="option-3" selected="selected">Option 3</option>
        <option value="option-4">Option 4</option>
        <option value="option-5">Option 5</option>
    </select>
</div>
<div class="right">
    <label for="method-val-multiple">Multiple select</label>
    <select id="method-val-multiple" multiple="multiple">
        <option value="option-101">Option 101</option>
        <option value="option-102">Option 102</option>
        <option value="option-103">Option 103</option>
        <option value="option-104" selected="selected">Option 104</option>
        <option value="option-105" selected="selected">Option 105</option>
    </select>
</div>

Javascript

const single = document.getElementById('method-val-single')
const multiple = document.getElementById('method-val-multiple')
const output = document.querySelector('output')

single.Select3()
multiple.Select3({
    closeOnSelect: false,
})

document.getElementById('val-output-btn').addEventListener('click', () => {
    let singleValue = single.val()
    let multipleValue = multiple.val()
    output.innerHTML = `
        Single select value (string): <code class="red result">${singleValue}</code>
        Multiple select value (array): <code class="red result">${multipleValue}</code>
    `
})

open() and close()

Mouse over this paragraph to open select, mouse out to close it.

HTML

<div class="wrapper">
    <label for="method-open-close">Another select</label>
    <select id="method-open-close">
        <option value="option-1" selected="selected">Option 1</option>
        <option value="option-2">Option 2</option>
        <option value="option-3" selected="selected">Option 3</option>
        <option value="option-4">Option 4</option>
        <option value="option-5">Option 5</option>
    </select>
</div>

<button id="open-btn">Click here to open select</button>
<button id="close-btn">Click here to close select</button>
<p id="hover-paragraph" class="button">Mouse over this paragraph to open select, mouse out to close it.</p>

Javascript

const openClose = document.getElementById('method-open-close')
const openBtn = document.getElementById('open-btn')
const closeBtn = document.getElementById('close-btn')
const hoverP = document.getElementById('hover-paragraph')

openClose.Select3()

openBtn.addEventListener('click', (event) => {
    openClose.open(event)
})

closeBtn.addEventListener('click', (event) => {
    openClose.close(event)
})

hoverP.addEventListener('mouseenter', () => {
    openClose.open()
})

hoverP.addEventListener('mouseleave', () => {
    openClose.close()
})