Programmatically changes

Interacting with the dropdown via JavaScript
<html>
<script src="https://jsuites.net/v4/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" />

<input type='button' value='Open the dropdown' class='jbutton dark' id='openbtn'>
<input type='button' value='Close the dropdown' class='jbutton dark' id='closebtn'>
<input type='button' value='Set value to: SQL' class='jbutton dark' id='setvalbtn'>
<input type='button' value='Reset values' class='jbutton dark' id='resetbtn'><br><br>

<div id="dropdown"></div>

<script>
let dd = jSuites.dropdown(document.getElementById('dropdown'), {
    data: [
        'JavaScript',
        'Python',
        'Java',
        'C/CPP',
        'PHP',
        'Swift',
        'C#',
        'Ruby',
        'Objective - C',
        'SQL',
    ],
    width:'280px'
});

openbtn.onclick = () => dd.open()
closebtn.onclick = () => dd.close()
setvalbtn.onclick = () => dd.setValue('SQL')
resetbtn.onclick = () => dd.reset()
</script>
</html>
Edit this page on GitHub