javascripttom-select

Empty value on initialization of Tom Select

I want to use Tom-Select.js to extend a select element (eg. for custom item rendering). The selectbox should be empty on load as no option is selected. However Tom always shows the first option in the list as selected on start (can be removed later). How can i make tom select to start with an empty select box?

new TomSelect('#ex-dropdown-input',{
    plugins: ['dropdown_input', 'remove_button'],
    allowEmptyOption:true,
});
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/css/tom-select.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/js/tom-select.complete.min.js"></script>


<select id="ex-dropdown-input" autocomplete="off" placeholder="How cool is this?">
    <option>amazing</option>
    <option>awesome</option>
    <option>cool</option>
    <option>excellent</option>
    <option>great</option>
    <option>neat</option>
    <option>superb</option>
    <option>wonderful</option>
</select>

Solution

  • Add option values to select element and the first option need to have same text of the placeholder and empty value

    <option value="">How cool is this?</option>

    and delete

    allowEmptyOption: true,

    you can also use select.clear if you dont want to add the empty option :

    select.clear();

    tom-select with empty option (the recommended way):

    var select = new TomSelect('#ex-dropdown-input',{
    create: true,
    plugins: ['dropdown_input', 'remove_button'],

});


// select.clear();
    <link href="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/css/tom-select.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/js/tom-select.complete.min.js"></script>


<select id="ex-dropdown-input" autocomplete="off" placeholder="How cool is this?">
    <option value="">How cool is this?</option>
    <option value="amazing">amazing</option>
    <option value="awesome">awesome</option>
    <option value="cool">cool</option>
    <option value="excellent">excellent</option>
    <option value="great">great</option>
    <option value="neat">neat</option>
    <option value="superb">superb</option>
    <option value="wonderful">wonderful</option>
</select>

    tom-select with clear and without empty option (not recomended because you need to check if the select is selected for update section before clearing the select):

    var select = new TomSelect('#ex-dropdown-input',{
    create: true,
    plugins: ['dropdown_input', 'remove_button'],

});

select.clear();
    <link href="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/css/tom-select.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/js/tom-select.complete.min.js"></script>


<select id="ex-dropdown-input" autocomplete="off" placeholder="How cool is this?">
    <option value="amazing">amazing</option>
    <option value="awesome">awesome</option>
    <option value="cool">cool</option>
    <option value="excellent">excellent</option>
    <option value="great">great</option>
    <option value="neat">neat</option>
    <option value="superb">superb</option>
    <option value="wonderful">wonderful</option>
</select>