Select box
By
Ken Hawkins
forms
Requires EBI Visual Framework
1.1.0, 1.2.0
Configurable select box/text input
Contribute a pattern
Have a great way of doing something, add it to the Style Lab. Here's how
Implementation code
Get a zip with all the sample HTML and any spaecial CSS or JS needed: Download a ZIP file More on how to use this
HTML
<link rel="stylesheet" href="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.2/libraries/Choices/assets/styles/css/choices.min.css">
<script src="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.2/libraries/Choices/assets/scripts/dist/choices.min.js"></script>
<label for="choices-multiple-remove-button">Demo</label>
<select class="form-control" name="choices-multiple-remove-button" id="choices-multiple-remove-button" placeholder="This is a placeholder" multiple>
<option value="Dropdown item 1" selected>Dropdown item 1</option>
<option value="Dropdown item 2">Dropdown item 2</option>
<option value="Dropdown item 3">Dropdown item 3</option>
<option value="Dropdown item 4">Dropdown item 4</option>
</select>
<!-- Single item -->
<div markdown="0">
<label for="topic">Single item selection</label>
<select name="topic" required id="topic" class="form-control">
<optgroup label="General">
<option value="EBI HELP: General Feedback" selected="selected">General Feedback or Please Select</option>
<option value="EBI HELP: Usability">Sign up for usability testing</option>
</optgroup>
<optgroup label="Genes, Genomes & Variation">
<option value="EBI HELP: CRAM">CRAM</option>
<option value="EBI HELP: DGVa">Database of Genomic Variants archive (DGVa)</option>
<option value="EBI HELP: EMBL-Bank">EMBL-Bank</option>
<option value="EBI HELP: EMBL-SVA">ENA Sequence Version Archive (SVA)</option>
<option value="EBI HELP: EGA">European Genome-phenome Archive (EGA)</option>
<option value="EBI HELP: ENA">European Nucleotide Archive (ENA)</option>
<option value="EBI HELP: EVA">European Variation Archive (EVA)</option>
<option value="EBI HELP: IMGT/HLA">IMGT/HLA</option>
<option value="EBI HELP: IPD">Immuno Polymorphism Database (IPD)</option>
<option value="EBI HELP: Metagenomics">Metagenomics</option>
<option value="EBI HELP: Webin">Webin</option>
</optgroup>
<optgroup label="RNA, Protein & Metabolite Expression">
<option value="EBI HELP: ArrayExpress">ArrayExpress</option>
<option value="EBI HELP: EGA">European Genome-phenome Archive (EGA)</option>
<option value="EBI HELP: GXA">Expression Atlas</option>
<option value="EBI HELP: MetabolLights">MetaboLights: Metabolomics archive and reference database</option>
<option value="EBI HELP: PRIDE">PRoteomics IDEntifications database (PRIDE)</option>
</optgroup>
<optgroup label="Protein Sequences, Families & Motifs">
<option value="EBI HELP: Enzyme Portal">Enzyme Portal</option>
<option value="EBI HELP: GOA">Gene Ontology Annotation (UniProt-GOA)</option>
<option value="EBI HELP: IntEnz">Integrated relational Enzyme database (IntEnz)</option>
<option value="EBI HELP: InterPro">InterPro: protein sequence analysis & classification</option>
<option value="EBI HELP: PRIDE">Proteomics Identifications database (PRIDE)</option>
<option value="EBI HELP: TreeFam">TreeFam - database of animal gene trees</option>
<option value="EBI HELP: UniProt">UniProt: The Universal Protein Resource</option>
<option value="EBI HELP: UniParc">UniProt Archive (UniParc)</option>
<option value="EBI HELP: UniSave">UniProtKB Sequence/Annotation Version Archive (UniSave)</option>
</optgroup>
<optgroup label="Molecular & Cellular Structures">
<option value="EBI HELP: EMDB">Electron Microscopy Data Bank (EMDB)</option>
<option value="EBI HELP: PDB">Protein Data Bank (PDB)</option>
<option value="EBI HELP: PDBe">Protein Data Bank in Europe (PDBe)</option>
<option value="Thornton group: PDBsum">PDBsum</option>
</optgroup>
<optgroup label="Reactions, Interactions & Pathways">
<option value="EBI HELP: BioModels">BioModels Database</option>
<option value="EBI HELP: IntAct">IntAct Molecular Interaction Database</option>
<option value="EBI HELP: Rhea">Rhea: Enzyme-catalysed reactions</option>
<option value="EBI HELP: SBO">Systems Biology Ontology (SBO)</option>
</optgroup>
<optgroup label="Chemogenomics & Metabolomics">
<option value="EBI HELP: ChEBI">Chemical Entities of Biological Interest (ChEBI)</option>
<option value="EBI HELP: ChEMBL">ChEMBL: Bioactive data for drug discovery</option>
<option value="EBI HELP: Enzyme Portal">Enzyme Portal</option>
<option value="EBI HELP: MetabolLights">MetaboLights: Metabolomics archive and reference database</option>
<option value="EBI HELP: Rhea">Rhea: Enzyme-catalysed reactions</option>
</optgroup>
<optgroup label="Taxonomies & Controlled Vocabularies">
<option value="EBI HELP: ChEBI">Chemical Entities of Biological Interest (ChEBI)</option>
<option value="EBI HELP: EFO">Experimental Factor Ontology (EFO)</option>
<option value="EBI HELP: GO">Gene Ontology (GO)</option>
<option value="EBI HELP: IntEnz">Integrated relational Enzyme database (IntEnz)</option>
<option value="EBI HELP: MIRIAM">MIRIAM Registry</option>
<option value="EBI HELP: QuickGO">QuickGO</option>
<option value="EBI HELP: SBO">Systems Biology Ontology (SBO)</option>
</optgroup>
<optgroup label="Literature - Scientific Publications & Patents">
<option value="EBI HELP: Europe PMC">Europe PubMed Central (Europe PMC)</option>
<option value="EBI HELP: Patent Data">Patent Databases</option>
<option value="EBI HELP: Whatizit">Whatizit</option>
</optgroup>
<optgroup label="Cross-domain Tools & Resources">
<option value="EBI HELP: BLAST">BLAST Sequence Search</option>
<!-- option value="EBI HELP: BioMart">BioMart</option -->
<option value="EBI HELP: Clustal">ClustalW Multiple Sequence Alignment</option>
<option value="EBI HELP: EBI Search">EBI Search</option>
<!-- option value="EBI HELP: Enzyme Portal">Enzyme Portal</option -->
<option value="EBI HELP: FASTA">FASTA Sequence Search</option>
<option value="EBI HELP: identifiers.org">identifiers.org</option>
<option value="EBI HELP: Patent Data">Patent Data</option>
<option value="EBI HELP: Web Services">Web Services</option>
</optgroup>
<optgroup label="Misc.">
<option value="EBI HELP: Courses">Courses</option>
<option value="EBI HELP: Database Query">Database Query</option>
<option value="EBI HELP: Data Submission">Data Submission</option>
<option value="EBI HELP: Error Message">Error Message</option>
<option value="EBI HELP: Events Calendar">Events Calendar</option>
<option value="EBI HELP: Jobs">Jobs</option>
<option value="EBI HELP: Microarrays">Microarrays</option>
<option value="EBI HELP: PhD Program">PhD Program</option>
<option value="EBI HELP: Research">Research</option>
<option value="EBI HELP: Sequence Alignment">Sequence Alignment</option>
<option value="EBI HELP: Sequences">Sequences</option>
<option value="EBI HELP: Software Error">Software Error</option>
<option value="EBI HELP: Structures">Structures</option>
<option value="EBI HELP: Survey">Survey</option>
<option value="EBI HELP: Technical Services">Technical Services</option>
<option value="EBI HELP: Training & Education">Training & Education</option>
<option value="EBI HELP: Usability">Usability testing</option>
<option value="EBI HELP: Other">Other feedback</option>
</optgroup>
</select>
</div>
<span class="form-error">Please select a relevant topic.</span>
<!-- For syntax highlighting -->
<link rel="stylesheet" href="https://dev.ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.2/css/ebi-code.css">
JS
document.addEventListener('DOMContentLoaded', function() {
var multipleCancelButton = new Choices('#choices-multiple-remove-button', {
delimiter: ',',
editItems: true,
maxItemCount: 5,
removeItemButton: true,
});
});
document.addEventListener('DOMContentLoaded', function() {
var supportFormSelect = new Choices('#topic', {
removeItemButton: true,
});
});