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
$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Browser Architecture
$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Connection
$:/plugins/tiddlywiki/dynaview/zoomable-diagram/DOM
$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Events
$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Node.js
$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Potatoes
$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Server Architecture
$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Service Workers
$:/plugins/tiddlywiki/dynaview/zoomable-diagram/TiddlyWiki Architecture
$:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/tiddlers/Gas Giant
$:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/tiddlers/Planet
$:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/tiddlers/Rocky
$:/tags:/ZoomableDiagram
$:/tags/AboveStory
$:/tags/AboveStory-disabled
$:/tags/Actions
$:/tags/AdvancedSearch
$:/tags/AdvancedSearch/FilterButton
$:/tags/ConfettiExample
$:/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/Settings/CodeMirror
$:/tags/ControlPanel/SettingsTab
$:/tags/ControlPanel/TestCases
$:/tags/ControlPanel/Toolbars
$:/tags/dynannotateExamples
$:/tags/dynaviewExamples
$:/tags/EditorToolbar
$:/tags/EditorTools
$:/tags/EditPreview
$:/tags/EditTemplate
$:/tags/EditTemplateBodyFilter
$:/tags/EditToolbar
$:/tags/Exporter
$:/tags/FieldEditorFilter
$:/tags/Filter
$:/tags/Global
$:/tags/HelpPanel
$:/tags/HelpPanel/Videos
$:/tags/Image
$:/tags/ImportPreview
$:/tags/KeyboardShortcut
$:/tags/Macro
$:/tags/Manager/ItemMain
$:/tags/Manager/ItemSidebar
$:/tags/MenuBar
$:/tags/MoreSideBar
$:/tags/MoreSideBar/Plugins
$:/tags/PageControls
$:/tags/PageTemplate
$:/tags/Palette
$:/tags/PluginLibrary
$:/tags/RawMarkupWikified
$:/tags/RawMarkupWikified/TopBody
$:/tags/SearchResults
$:/tags/SideBar
$:/tags/SideBarSegment
$:/tags/StartupAction
$:/tags/StoryTiddlerTemplateFilter
$:/tags/Stylesheet
$:/tags/TestCase/Actions
$:/tags/TextEditor/Snippet
$:/tags/TiddlerColourFilter
$:/tags/TiddlerIconFilter
$:/tags/TiddlerInfo
$:/tags/TiddlerInfo/Advanced
$:/tags/TiddlerList
$:/tags/TiddlyWikiSites
$:/tags/ToolbarButtonStyle
$:/tags/TopRightBar
$:/tags/Tour
$:/tags/Tour/IntroductionToTiddlyWiki
$:/tags/ViewTemplate
$:/tags/ViewTemplate/Subtitle
$:/tags/ViewTemplateBodyFilter
$:/tags/ViewTemplateSubtitleFilter
$:/tags/ViewTemplateTagsFilter
$:/tags/ViewTemplateTitleFilter
$:/tags/ViewToolbar
$:/tags/wiki-test-spec
$:/tags/wiki-test-spec-failing
About
abs Operator
acos Operator
ActionCreateTiddlerWidget
ActionListopsWidget
ActionWidgets
add Operator
addprefix Operator
addsuffix Operator
after Operator
all Operator
allafter Operator
allbefore Operator
AlphaReleaseNotes
Android
append Operator
applypatches Operator
Articles
asin Operator
atan2 Operator
average Operator
backlinks Operator
backtranscludes Operator
before Operator
BetaReleaseNotes
Binary Mathematics Operators
Block Mode WikiText
butlast Operator
Cascade Filter Run Prefix
Cascades
ceil Operator
changecount Macro
charcode Operator
CheckboxWidget
Chrome
colour Macro
colour-picker Macro
Commands
commands Operator
Common Operators
Community
Community Editions
Community Palettes
Community Plugins
Community Resources
Community Themes
compare Operator
Concepts
Conditional Operators
Configuration Variables
contains Operator
Contents
copy-to-clipboard Macro
Core Functions
Core Icons
Core Macros
Core Messages
Core Procedures
Core Variables
Core Widgets
cos Operator
currentTiddler Variable
Custom data-styles
Custom Styles FAQ
Customise TiddlyWiki
cycle Operator
data-tags-styles
datauri Macro
Date Operators
days Operator
Debugging Widgets
decodebase64 Operator
decodehtml Operator
decodeuri Operator
decodeuricomponent Operator
Definitions
Demonstrations
deserialize Operator
deserializer Operator
divide Operator
done
Drag and Drop
dumpvariables Macro
DynannotateDemo
each Operator
eachday Operator
Edge
Editions
Editor toolbar
else Operator
encodebase64 Operator
encodehtml Operator
encodeuri Operator
encodeuricomponent Operator
enlist Operator
enlist-input Operator
escapecss Operator
escaperegexp Operator
example-hardlinebreaks
example-test
Examples
exponential Operator
external-image
external-text
FAQ-group
Features
field Operator
Field Operators
FieldManglerWidget
Fields
fields Operator
Filter Expression
Filter Filter Run Prefix
filter Operator
Filter Operators
Filter Run
Filter Run Prefix
Filter Step
Filter Syntax
Filters
Firefox
First
first Operator
fixed Operator
floor Operator
Font Awesome 5
format Operator
Formatting text in TiddlyWiki
get Operator
getindex Operator
GettingStarted
getvariable Operator
Group Operators
Hard Linebreaks in WikiText
has Operator
HelloThere
HelloThere Badge
HelloThumbnail
Hidden Settings
How to apply custom styles
HTML in WikiText
Icon
Icons
image-picker Macro
Images
Importing Tiddlers
Improving TiddlyWiki Documentation
indexes Operator
insertafter Operator
insertbefore Operator
Installing TiddlyWiki on Microsoft Internet Information Server
Internet Explorer
Intersection Filter Run Prefix
iOS
is Operator
join Operator
JSON in TiddlyWiki
JSON Operators
jsonset Operator
jsonstringify Operator
KeyboardDrivenInput
KeyboardWidget
Language
Languages
last Operator
Learning
length Operator
levenshtein Operator
limit Operator
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
log Operator
lowercase Operator
Mac
Macro Examples
Macro Syntax
Macros
makedatauri Macro
makepatches Operator
Map Filter Run Prefix
match Operator
Mathematics Operators
max Operator
maxall Operator
Mechanisms
median Operator
Meetups
Message Examples
MessageHandlerWidgets
Messages
min Operator
minall Operator
minlength Operator
moduleproperty Operator
Modules
modules Operator
moduletypes Operator
move Operator
multiply Operator
Named Filter Run Prefix
navigator-message
Negatable Operators
negate Operator
next Operator
now Macro
nsort Operator
nsortcs Operator
nth Operator
OfficialPlugins
Opera
Operator Examples
Order Operators
Other Resources
pad Operator
ParametersWidget
ParametersWidget Examples
PHP
picture
Platforms
Plugin Editions
PluginMechanism
plugins
Plugins
PluginsCS
plugintiddlers Operator
power Operator
Pragmas
precision Operator
prefix Operator
prepend Operator
previous Operator
Procedure Syntax
Procedures
product Operator
putafter Operator
putbefore Operator
putfirst Operator
putlast Operator
qualify Macro
Quick Start
RadioWidget
RangeWidget
Reduce Filter Run Prefix
reduce Operator
Reducing Mathematics Operators
Reference
Reference Tiddlers
RefreshMechanism
regexp Operator
Release 5.0.11-beta
Release 5.0.8-beta
Release 5.0.9-beta
Release Template
ReleaseNotes
Releases
remainder Operator
remove Operator
removeprefix Operator
removesuffix Operator
replace Operator
resolvepath Macro
Resources
rest Operator
reverse Operator
round Operator
Safari
sameday Operator
sampletab
sampletag1
sampletag2
Saving
Saving with TiddlyFox
search Operator
search-replace Operator
Second
SecondThree
Selection Constructors
Selection Constructors: Conditional
sentencecase Operator
ServerCommand
sha256 Operator
shadowsource Operator
shopping
sign Operator
sin Operator
Sort Filter Run Prefix
sort Operator
sortan Operator
sortby Operator
sortcs Operator
sortsub Operator
Special Operators
split Operator
splitbefore Operator
splitregexp Operator
Standalone App
standard-deviation Operator
Story Tiddler Template
Story Tiddler Template Cascade
storyTiddler Variable
storyviews Operator
String Operators
stringify Operator
subfilter Operator
substitute Operator
subtract Operator
suffix Operator
sum Operator
SVG
SystemTags
SystemTiddlers
Table-of-Contents Demonstrations
Table-of-Contents Macros
table-of-contents-example
TableOfContents
Tables in WikiText
tabs Macro
tag Macro
tag Macro (Examples)
tag Operator
Tag Operators
tag-picker Macro
tag-pill Macro
Tagging
tagging Operator
tags Operator
tan Operator
task
TaskManagementExample
test
Testimonial
Then Filter Run Prefix
then Operator
Third
thisTiddler
thisTiddler Variable
thumbnail Macro
Tiddler Icon Cascade
TiddlyDesktop
TiddlyFox
TiddlyWiki on Node.js
TiddlyWikiFolders
TiddlyWikiSitesMenu
timeline Macro
title Operator
titlecase Operator
toggle Operator
transcludes Operator
Transclusion in WikiText
transclusion Variable
translink Macro
tree Macro
TriggeringWidgets
Trigonometric Operators
trim Operator
trunc Operator
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
Unary Mathematics Operators
unique Operator
untagged Operator
untrunc Operator
unusedtitle Macro
uppercase Operator
Using Stylesheets
Variable Examples
Variable Usage
Variables
variables Operator
variance Operator
version Macro
Videos
WebServer
WebServer API
WebServer Authentication
WebServer Guides
WebServer Parameters
Widget Attributes
Widget Examples
Widgets
WikiText
WikiText Examples
WikiText parser mode transitions
WikiText parser mode transitions (Examples)
WikiText Parser Modes
Windows
Working with the TiddlyWiki5 repository
Working with TiddlyWiki
zth Operator
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 tooltip Optional tooltip 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 focus Introduced in v5.2.4 Optional. Set to "yes" to automatically focus the HTML select element after creationtabindex New in v5.3.1 Optional. Sets the tabindex
attribute of the HTML select element to the given valuedata-* New in v5.3.2 Optional data attributes to be assigned to the HTML elementstyle.* New in v5.3.2 Optional CSS properties to be assigned to the HTML element
Examples Simple Lists This example sets the title of the current wiki $:/SiteTitle to one of a list of book titles:
<$select tiddler='$:/SiteTitle' tooltip='Choose a new site title'>
<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
Simple List with Placeholder Value To display a default value that is also disabled, effectively functioning as a placeholder, the following form can be used. Note that the targeted field must be empty, or not exist, for the placeholder to show in the widget:
<$select tiddler='New Tiddler' field='text' default='Choose a new text'>
<option disabled>Choose a new text</option>
<option>A Tale of Two Cities</option>
<option>A New Kind of Science</option>
<option>The Dice Man</option>
</$select>
That renders as:
Choose a new text
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:
HelloThere
Learning
Working with TiddlyWiki
Customise TiddlyWiki
Features
Filters
Languages
Editions
Plugins
Platforms
Reference
Community
About
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:
Compound tiddler (text/vnd.tiddlywiki-multiple)
Data dictionary (application/x-tiddler-dictionary)
JavaScript code (application/javascript)
JSON data (application/json)
Static stylesheet (text/css)
GIF image (image/gif)
JPEG image (image/jpeg)
PNG image (image/png)
SVG image (image/svg+xml)
HTML markup (text/html)
Plain text (text/plain)
TiddlyWiki 5 (text/vnd.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:
HelloThere
Learning
Working with TiddlyWiki
Customise TiddlyWiki
Features
Filters
Languages
Editions
Plugins
Platforms
Reference
Community
About
Actions This example uses the actions attribute to apply days of the week as tags to the current tiddler.
<$select tiddler='$:/generated-list-demo-state' field='actions-test'
actions='<$action-listops $field="myfield" $tags={{$:/generated-list-demo-state!!actions-test}}/>'
>
<$list filter='[list[Days of the Week]]'>
<option><$view field='title'/></option>
</$list>
</$select>
That renders as:
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
Sunday