How can i set display to none until triggered by an event?

[nellytadi]

I am trying to set display of the multiple select to none until an event trigers it to show. I tried
<select class="multipleSelect" multiple id="multipleSelect" style="display: none;"></select>
But it doesn't do anything. Please any good suggestions?

[zignis]

Style attributes on select or option won't because when the dropdown is clicked, instead of select with options, the package converts options into spans and divs to replicate a select tag. If you want to apply styling, you can use a custom class and define it in the global settings:

$("YOUR_ELEMENT").fastselect({
elementClass: 'customElement',
});

And then apply styles through CSS:

.customElement {
display: none;
}

Now you can control the visibility of the select using scripts by either using pure JS:

document.querySelector(".customElement").style.display="block";

or through jQuery:

$(".customElement").hide();

All global options and classes:

$.Fastselect.defaults = {

    elementClass: 'fstElement',
    singleModeClass: 'fstSingleMode',
    noneSelectedClass: 'fstNoneSelected',
    multipleModeClass: 'fstMultipleMode',
    queryInputClass: 'fstQueryInput',
    queryInputExpandedClass: 'fstQueryInputExpanded',
    fakeInputClass: 'fstFakeInput',
    controlsClass: 'fstControls',
    toggleButtonClass: 'fstToggleBtn',
    activeClass: 'fstActive',
    itemSelectedClass: 'fstSelected',
    choiceItemClass: 'fstChoiceItem',
    choiceRemoveClass: 'fstChoiceRemove',
    userOptionClass: 'fstUserOption',

    resultsContClass: 'fstResults',
    resultsOpenedClass: 'fstResultsOpened',
    resultsFlippedClass: 'fstResultsFilpped',
    groupClass: 'fstGroup',
    itemClass: 'fstResultItem',
    groupTitleClass: 'fstGroupTitle',
    loadingClass: 'fstLoading',
    noResultsClass: 'fstNoResults',
    focusedItemClass: 'fstFocused',

    matcher: null,

    url: null,
    loadOnce: false,
    apiParam: 'query',
    initialValue: null,
    clearQueryOnSelect: true,
    minQueryLength: 1,
    focusFirstItem: false,
    flipOnBottom: true,
    typeTimeout: 150,
    userOptionAllowed: false,
    valueDelimiter: ',',
    maxItems: null,

    parseData: null,
    onItemSelect: null,
    onItemCreate: null,
    onMaxItemsReached: null,

    placeholder: 'Choose option',
    searchPlaceholder: 'Search options',
    noResultsText: 'No results',
    userOptionPrefix: 'Add '

};

As listed in the docs.