Introduction The select widget displays a popup menu based on a HTML select element . The popup (or dropdown) contains a list of items defined by <option> and <optgroup> elements.
Every time the user selects a new value in the menu, the selected value is written to the text of a specified tiddler field or index and any ActionWidgets within the actions attribute are triggered. Conversely, if the tiddler value is changed independently the select widget is automatically updated to reflect the new value.
In multiple selection mode, the list of selected values is bound to the specified tiddler field or index. Browsers generally use the ctrl or cmd keys for multiple selection.
For example, this select widget displays a list of the tags in this wiki:
<$select tiddler=<<qualify 'select-demo'>> default='HelloThere'>
<$list filter='[all[shadows+tiddlers]tags[]sort[title]]'>
<option value=<<currentTiddler>>><$view field='title'/></option>
</$list>
</$select>That renders as:
$:/deprecated
$:/tags/AboveStory
$:/tags/Actions
$:/tags/AdvancedSearch
$:/tags/AdvancedSearch/FilterButton
$:/tags/ControlPanel
$:/tags/ControlPanel/Advanced
$:/tags/ControlPanel/Appearance
$:/tags/ControlPanel/Cascades
$:/tags/ControlPanel/Info
$:/tags/ControlPanel/Plugins
$:/tags/ControlPanel/Saving
$:/tags/ControlPanel/Settings
$:/tags/ControlPanel/Toolbars
$:/tags/EditorToolbar
$:/tags/EditorTools
$:/tags/EditPreview
$:/tags/EditTemplate
$:/tags/EditTemplateBodyFilter
$:/tags/EditToolbar
$:/tags/Exporter
$:/tags/FieldEditorFilter
$:/tags/Filter
$:/tags/HelpPanel
$:/tags/HelpPanel/Videos
$:/tags/Image
$:/tags/ImportPreview
$:/tags/KeyboardShortcut
$:/tags/Macro
$:/tags/Manager/ItemMain
$:/tags/Manager/ItemSidebar
$:/tags/MoreSideBar
$:/tags/MoreSideBar/Plugins
$:/tags/PageControls
$:/tags/PageTemplate
$:/tags/Palette
$:/tags/PluginLibrary
$:/tags/RawMarkupWikified/TopBody
$:/tags/SearchResults
$:/tags/SideBar
$:/tags/SideBarSegment
$:/tags/StoryTiddlerTemplateFilter
$:/tags/Stylesheet
$:/tags/SyncerDropdown
$:/tags/TextEditor/Snippet
$:/tags/TiddlerColourFilter
$:/tags/TiddlerIconFilter
$:/tags/TiddlerInfo
$:/tags/TiddlerInfo/Advanced
$:/tags/ToolbarButtonStyle
$:/tags/TopRightBar
$:/tags/ViewTemplate
$:/tags/ViewTemplateBodyFilter
$:/tags/ViewTemplateTitleFilter
$:/tags/ViewToolbar
1. Basic concepts summary
2. Material and Methods
2) Capture endogenous L1 from PA-1 cells
24-well screen
293
3. Experiments
3xFLAG
4. LINE-1 in PA-1 - Manuscript progression and notes
abbreviation
abcam
About
ActionCreateTiddlerWidget
ActionWidgets
addprefix Operator
addsuffix Operator
after Operator
Alex's Journal
all Operator
allafter Operator
allbefore Operator
AlphaReleaseNotes
Amir Zakirov's Journal
AmSO4 precipitation
Android
anti-ATF2
anti-DACH1
anti-FLAG
anti-FLAG beads
anti-FOXC2
anti-GFP
anti-HA
anti-hIgG HRP
anti-KLF5
anti-ORF1
anti-ORF1 beads
anti-ORF2
anti-ORF2 beads
anti-RELA
anti-SMAD4
anti-STAT3
anti-TP53
Antibody recovery
Apostolis Mourtz's Journal
append Operator
Arianna Picozzi's Journal
Articles
backlinks Operator
Bead testing_Lars
beads titration
before Operator
BetaReleaseNotes
BSA Stock
butlast Operator
Capture RNP from PC/DC labelled
CDI
CDI L1 antibodies
CDI recombinant proteins
CDI Transcription Factor Antibodies
Cell Culture
Cell culture_Lars
cell line
changecount Macro
Chrome
cloning
colour Macro
colour-picker Macro
Column Data
Commands
commands Operator
Common Operators
Community
Concept Summary
Concepts
Configuration Variables
Conjugation and testing of new a-ORF1P antibodies_Lars
contains Operator
Contents
copy-to-clipboard Macro
Core Macros
Core Variables
CRC tumor
currentTiddler Variable
Custom data-styles
Custom Styles FAQ
Customise TiddlyWiki
Data
data-tags-styles
datauri Macro
Date Operators
days Operator
decodehtml Operator
decodeuri Operator
decodeuricomponent Operator
Definitions
Detection of endogenous ORF2p_Lars
Dialysis
DMP XL
DNA/RNA hybrid
DNase I
done
Drag and Drop
dumpvariables Macro
Dynabeads conjugation
E-Cadherin
each Operator
eachday Operator
Editions
Editor toolbar
eLEAP
EM
EM sample prep
encodehtml Operator
encodeuri Operator
encodeuricomponent Operator
Endogenous a-ORF1 RNA-seq_Lars
endogenous cell lines
enlist Operator
Equipment
escaperegexp Operator
example-hardlinebreaks
example-test
Examples
Experiments
Experiments_Lars
external-image
external-text
FaQ
FAQ-group
Features
field Operator
Field Operators
FieldManglerWidget
Fields
fields Operator
Filter Operators
Filter Syntax
Filters
Firefox
First
first Operator
Formatting text in TiddlyWiki
GA Crosslink
get Operator
getindex Operator
Glutathine resin
gradient
Group Operators
GST fusion protein
GTD
Hard Linebreaks in WikiText
has Operator
HECK293
HEK293 TLD
HelloThere
HelloThumbnail
HelloThumbnail-disabled
Hidden Setting
Hidden Settings
Hosting your TiddlyWiki on the web
How to apply custom styles
HowTo
HTML in WikiText
Hua Jiang's Journal
Human Tumor
I-DIRT
Icon
image-picker Macro
Immunoprecipitation
Immunostaining
Importing Tiddlers
Improving TiddlyWiki Documentation
indexes Operator
Installing TiddlyWiki on Node.js
InternetExplorer
iOS
IP RNA-seq
is Operator
Isotope check
John LaCava's Journal
Journal
kit
L1
L1 constructs
L1 RNP
Language
Languages
LaORF1 beads
LaORF2 beads
Lars ter Morsche's Journal
last Operator
LD401 powder
LD564
Learning
Leila Saba's Journal
limit Operator
LINE-1 in PA-1 Manuscript
lingo Macro
links Operator
Linux
list Operator
list-links Macro
list-links-draggable Macro
list-tagged-draggable Macro
listed Operator
ListenCommand
Listops Operators
Lists
ListWidget
locations
Luciano Di Stefano's Journal
M6A
mAbs
Mac
Macro Examples
Macro Syntax
Macros
makedatauri Macro
Maria Benitez' Journal
materials
Mechanisms
Meetups
Mehrnoosh Oghbaie's Journal
Messages
Methods
mIgG
mIgG beads
Milo
minlength Operator
MISO
Modules
modules Operator
moduletypes Operator
move Operator
MS
MT646
MT647
N2102EP
N2102Ep
n2102ep
N2102P
nanobody
nanobody beads
Native elution
navigator-message
NCBP
Negatable Operators
next Operator
NFkB
NIH grant
now Macro
nsort Operator
nsortcs Operator
NTERA
nth Operator
Nuclease treatment
OfficialPlugins
Opera
Operator Examples
Order Operators
ORF1 nanobodies
ORF1 peptide
ORF2 peptide
ORF2p
PA-1
PA-1 differentiation
PacBio
PCR
PEI Max
PHP
picture
Platforms
pLD401
Plugin Editions
PluginMechanism
Plugins
plugins
plugintiddlers Operator
prefix Operator
prepend Operator
previous Operator
procedures
Protein A beads
Protein Assay
Protein G beads
Protein precipitation
Proteinase K digestion
ProteinSimple
ProteinSimple Equipment
ProteinSimple Wes
PROTIFI
Protocols
putafter Operator
putbefore Operator
putfirst Operator
putlast Operator
Qiagen
qualify Macro
Quarter
rabbit IgG beads
ReadMe
reagent
reagents
Reference
regexp Operator
Release 5.0.11-beta
Release 5.0.8-beta
Release 5.0.9-beta
ReleaseNotes
Releases
remove Operator
removeprefix Operator
removesuffix Operator
replace Operator
resolvepath Macro
Resources
rest Operator
reverse Operator
Ribosomal subunit binding of ORF1p
rIgG beads
Ring1B
RNA
RNA extraction
RNA methylation
RNA work_Lars
RNase inhibitor
RNase treatment
RNVC
ROME
RRP6
S-Trap
s9.6 antibody
S9.6 beads
S9.6 epoxy beads
Safari
sameday Operator
sampletab
sampletag1
sampletag2
Saving
Saving with TiddlyFox
search Operator
SEC
Second
SecondThree
Selection Constructors
Senescent cells
ServerCommand
shadowsource Operator
Shaoshuai's journal
SignIn
Site
SLE
Sonication condition
sort Operator
sortan Operator
sortby Operator
sortcs Operator
Special Operators
splitbefore Operator
Stage Tip
storyTiddler Variable
storyviews Operator
String Operators
stringify Operator
subfilter Operator
suffix Operator
suspension culture
SystemTags
SystemTiddlers
Table-of-Contents Macros
table-of-contents-example
TableOfContents
tabs Macro
tag Macro
tag Macro (Examples)
tag Operator
Tag Operators
Tagging
tagging Operator
tags Operator
tandem IP
task
Test
Testing Mass photometer
TFs
Third
Thrombin cleavage
thumbnail Macro
TiddlyDesktop
TiddlyWiki on Node.js
TiddlyWikiFolders
timeline Macro
title Operator
ToC
total RNA
Transclusion in WikiText
transclusion Variable
Transfection
tree Macro
Tutorials
tv-adjust-heading-level Variable
tv-config-toolbar-class Variable
tv-config-toolbar-icons Variable
tv-config-toolbar-text Variable
tv-get-export-image-link Variable
tv-wikilink-tooltip Variable
tv-wikilinks Variable
untagged Operator
Using TiddlyWiki on Node.js
Variable Examples
Variables
version Macro
Videos
WebServer
WebServer API
WebServer Authentication
WebServer Guides
WebServer Parameters
WhoIs
Widget Examples
Widgets
WIKI How-to
WikiText
WikiText Examples
Windows
Working with the TiddlyWiki5 repository
Working with TiddlyWiki
XL-MS_Lars
Ydwine van der Veen's Journal
Year
ZipChip
ZnCl2
Zymo
The state tiddler currently contains:
See the text change as you switch entries in the select widget. Try changing the value of the state tiddler and see the select widget change. Notice how the select widget only displays an entry if there is a precise match with the tiddler text.
Content and Attributes The content of the <$select> widget should be one or more HTML <option> or <optiongroup> elements that provide the available values.
Attribute Description tiddler The title of the tiddler containing the value to be displayed/modified by the select widget (defaults to the current tiddler) field The field name for the value in the current tiddler (defaults to "text") index The index of a property in a DataTiddler (takes precedence over the field attribute) class CSS classes to be assigned to the HTML select element default Default value to be used if the tiddler, field or index specifies a missing value multiple If present, switches to multiple selection mode size The number of rows to display in multiple selection mode actions A string containing ActionWidgets to be triggered when the key combination is detected
Examples Simple Lists This example sets the title of the current wiki $:/SiteTitle to one of a list of book titles:
<$select tiddler='$:/SiteTitle'>
<option>A Tale of Two Cities</option>
<option>A New Kind of Science</option>
<option>The Dice Man</option>
</$select>That renders as:
A Tale of Two Cities
A New Kind of Science
The Dice Man
Value lists In this example the value attribute has been used to specify the text that should be used as the value of the entry instead of the display text.
<$select tiddler='$:/SiteTitle'>
<option value='cities'>A Tale of Two Cities</option>
<option value='science'>A New Kind of Science</option>
<option value='dice'>The Dice Man</option>
</$select>That renders as:
A Tale of Two Cities
A New Kind of Science
The Dice Man
Option Groups Entries in the list can be grouped together with the <optgroup> element
<$select tiddler='$:/SiteTitle'>
<optgroup label='Fiction'>
<option value='cities'>A Tale of Two Cities</option>
<option value='dice'>The Dice Man</option>
</optgroup>
<optgroup label='Non-fiction'>
<option value='science'>A New Kind of Science</option>
<option value='recursive'>The Recursive Universe</option>
</optgroup>
</$select>That renders as:
A Tale of Two Cities
The Dice Man
A New Kind of Science
The Recursive Universe
Generated Lists The ListWidget can be used to generate the options for a select widget. For example, here we combine a select widget listing all the tiddlers tagged TableOfContents with a transclusion to display the text of the selected one.
<$select tiddler='$:/generated-list-demo-state'>
<$list filter='[tag[TableOfContents]]'>
<option><$view field='title'/></option>
</$list>
</$select>
<$tiddler tiddler={{$:/generated-list-demo-state}}>
<$transclude mode='block'/>
</$tiddler>That renders as:
Nested Lists This example uses a nested pair of list widgets. The outer one generates the <optgroup> elements, and the inner one generates <option> elements:
<$select tiddler='$:/generated-list-demo-nestedstate' field='type' default='text/vnd.tiddlywiki'>
<$list filter='[all[shadows+tiddlers]prefix[$:/language/Docs/Types/]each[group]sort[group]]'>
<optgroup label={{!!group}}>
<$list filter='[all[shadows+tiddlers]prefix[$:/language/Docs/Types/]group{!!group}] +[sort[description]]'>
<option value={{!!name}}><$view field='description'><$view field='title'/></$view> (<$view field='name'/>)</option>
</$list>
</optgroup>
</$list>
</$select>That renders as:
Data dictionary (application/x-tiddler-dictionary)
JavaScript code (application/javascript)
JSON data (application/json)
Static stylesheet (text/css)
GIF image (image/gif)
ICO format icon file (image/x-icon)
JPEG image (image/jpeg)
PNG image (image/png)
Structured Vector Graphics image (image/svg+xml)
HTML markup (text/html)
Plain text (text/plain)
TiddlyWiki 5 (text/vnd.tiddlywiki)
TiddlyWiki Classic (text/x-tiddlywiki)
Multiple Selections This example uses the multiple keyword to specify that we should be able to select multiple items.
<$select tiddler='$:/generated-list-demo-state' field='testing' multiple size='8'>
<$list filter='[tag[TableOfContents]]'>
<option><$view field='title'/></option>
</$list>
</$select><br />
<$list filter='[list[$:/generated-list-demo-state!!testing]]'>
<$view field='title' /><br />
</$list>
That renders as: