Artifact
c57d6b8ab3376f2d6c148b836a5bcf8f28c29407e5639af7fce70d9765d22ccb:
0000: 3c 73 65 6c 65 63 74 2d 74 65 73 74 3e 0a 20 20 <select-test>.
0010: 3c 66 6f 72 6d 20 69 64 3d 22 73 65 6c 65 63 74 <form id="select
0020: 2d 74 65 73 74 2d 66 6f 72 6d 22 3e 0a 20 20 20 -test-form">.
0030: 20 3c 21 2d 2d 4f 6e 65 20 73 69 6e 67 6c 65 20 <!--One single
0040: 6f 70 74 69 6f 6e 2c 20 77 69 74 68 6f 75 74 20 option, without
0050: 65 78 70 72 65 73 73 69 6f 6e 73 2d 2d 3e 0a 20 expressions-->.
0060: 20 20 20 3c 73 65 6c 65 63 74 20 64 61 74 61 3d <select data=
0070: 7b 74 68 65 4f 70 74 69 6f 6e 73 7d 20 64 61 74 {theOptions} dat
0080: 61 2d 69 73 3d 22 73 65 6c 65 63 74 2d 73 69 6e a-is="select-sin
0090: 67 6c 65 2d 6f 70 74 69 6f 6e 22 3e 3c 2f 73 65 gle-option"></se
00a0: 6c 65 63 74 3e 0a 20 20 20 20 3c 21 2d 2d 4c 6f lect>. <!--Lo
00b0: 6f 70 65 64 20 6f 70 74 69 6f 6e 2c 20 6e 6f 20 oped option, no
00c0: 67 72 6f 75 70 2d 2d 3e 0a 20 20 20 20 3c 73 65 group-->. <se
00d0: 6c 65 63 74 20 64 61 74 61 3d 7b 74 68 65 4f 70 lect data={theOp
00e0: 74 69 6f 6e 73 7d 20 64 61 74 61 2d 69 73 3d 22 tions} data-is="
00f0: 73 65 6c 65 63 74 2d 65 61 63 68 2d 6f 70 74 69 select-each-opti
0100: 6f 6e 22 3e 3c 2f 73 65 6c 65 63 74 3e 0a 20 20 on"></select>.
0110: 20 20 3c 21 2d 2d 53 69 6e 67 6c 65 20 6f 70 74 <!--Single opt
0120: 69 6f 6e 20 2b 20 6c 6f 6f 70 65 64 20 6f 70 74 ion + looped opt
0130: 69 6f 6e 2c 20 6e 6f 20 67 72 6f 75 70 2d 2d 3e ion, no group-->
0140: 0a 20 20 20 20 3c 73 65 6c 65 63 74 20 64 61 74 . <select dat
0150: 61 3d 7b 74 68 65 4f 70 74 69 6f 6e 73 7d 20 64 a={theOptions} d
0160: 61 74 61 2d 69 73 3d 22 73 65 6c 65 63 74 2d 65 ata-is="select-e
0170: 61 63 68 2d 6f 70 74 69 6f 6e 2d 70 72 6f 6d 70 ach-option-promp
0180: 74 22 3e 3c 2f 73 65 6c 65 63 74 3e 0a 20 20 20 t"></select>.
0190: 20 3c 21 2d 2d 54 77 6f 20 6c 6f 6f 70 65 64 20 <!--Two looped
01a0: 6f 70 74 69 6f 6e 73 2c 20 6e 6f 20 67 72 6f 75 options, no grou
01b0: 70 2d 2d 3e 0a 20 20 20 20 3c 73 65 6c 65 63 74 p-->. <select
01c0: 20 64 61 74 61 3d 7b 74 68 65 4f 70 74 69 6f 6e data={theOption
01d0: 73 7d 20 64 61 74 61 2d 69 73 3d 22 73 65 6c 65 s} data-is="sele
01e0: 63 74 2d 65 61 63 68 2d 74 77 6f 2d 6f 70 74 69 ct-each-two-opti
01f0: 6f 6e 73 22 3e 3c 2f 73 65 6c 65 63 74 3e 0a 20 ons"></select>.
0200: 20 20 20 3c 21 2d 2d 4f 6e 65 20 67 72 6f 75 70 <!--One group
0210: 20 77 69 74 68 20 6f 6e 65 20 6c 6f 6f 70 65 64 with one looped
0220: 20 6f 70 74 69 6f 6e 2d 2d 3e 0a 20 20 20 20 3c option-->. <
0230: 73 65 6c 65 63 74 20 64 61 74 61 3d 7b 74 68 65 select data={the
0240: 4f 70 74 69 6f 6e 73 7d 20 64 61 74 61 2d 69 73 Options} data-is
0250: 3d 22 73 65 6c 65 63 74 2d 6f 70 74 67 72 6f 75 ="select-optgrou
0260: 70 2d 65 61 63 68 2d 6f 70 74 69 6f 6e 22 3e 3c p-each-option"><
0270: 2f 73 65 6c 65 63 74 3e 0a 20 20 20 20 3c 21 2d /select>. <!-
0280: 2d 53 69 6e 67 6c 65 20 6f 70 74 69 6f 6e 20 2b -Single option +
0290: 20 6f 6e 65 20 67 72 6f 75 70 20 77 69 74 68 20 one group with
02a0: 6f 6e 65 20 6c 6f 6f 70 65 64 20 6f 70 74 69 6f one looped optio
02b0: 6e 2d 2d 3e 0a 20 20 20 20 3c 73 65 6c 65 63 74 n-->. <select
02c0: 20 64 61 74 61 3d 7b 74 68 65 4f 70 74 69 6f 6e data={theOption
02d0: 73 7d 20 64 61 74 61 2d 69 73 3d 22 73 65 6c 65 s} data-is="sele
02e0: 63 74 2d 6f 70 74 67 72 6f 75 70 2d 65 61 63 68 ct-optgroup-each
02f0: 2d 6f 70 74 69 6f 6e 2d 70 72 6f 6d 70 74 22 3e -option-prompt">
0300: 3c 2f 73 65 6c 65 63 74 3e 0a 20 20 20 20 3c 21 </select>. <!
0310: 2d 2d 54 77 6f 20 67 72 6f 75 70 73 20 77 69 74 --Two groups wit
0320: 68 20 6f 6e 65 20 6c 6f 6f 70 65 64 20 6f 70 74 h one looped opt
0330: 69 6f 6e 20 65 61 63 68 2d 2d 3e 0a 20 20 20 20 ion each-->.
0340: 3c 73 65 6c 65 63 74 20 64 61 74 61 3d 7b 74 68 <select data={th
0350: 65 4f 70 74 69 6f 6e 73 7d 20 64 61 74 61 2d 69 eOptions} data-i
0360: 73 3d 22 73 65 6c 65 63 74 2d 74 77 6f 2d 6f 70 s="select-two-op
0370: 74 67 72 6f 75 70 2d 65 61 63 68 2d 6f 70 74 69 tgroup-each-opti
0380: 6f 6e 22 3e 3c 2f 73 65 6c 65 63 74 3e 0a 20 20 on"></select>.
0390: 20 20 3c 21 2d 2d 4c 6f 6f 70 65 64 20 67 72 6f <!--Looped gro
03a0: 75 70 20 28 32 20 69 74 65 6d 73 29 20 77 69 74 up (2 items) wit
03b0: 68 20 6c 6f 6f 70 65 64 20 6f 70 74 69 6f 6e 73 h looped options
03c0: 2d 2d 3e 0a 20 20 20 20 3c 73 65 6c 65 63 74 20 -->. <select
03d0: 64 61 74 61 3d 7b 74 68 65 4f 70 74 69 6f 6e 73 data={theOptions
03e0: 7d 20 64 61 74 61 2d 69 73 3d 22 73 65 6c 65 63 } data-is="selec
03f0: 74 2d 65 61 63 68 2d 6f 70 74 67 72 6f 75 70 22 t-each-optgroup"
0400: 3e 3c 2f 73 65 6c 65 63 74 3e 0a 20 20 3c 2f 66 ></select>. </f
0410: 6f 72 6d 3e 0a 20 20 3c 73 63 72 69 70 74 3e 0a orm>. <script>.
0420: 20 20 20 20 74 68 69 73 2e 74 68 65 4f 70 74 69 this.theOpti
0430: 6f 6e 73 20 3d 20 5b 27 4f 70 74 31 27 2c 20 27 ons = ['Opt1', '
0440: 4f 70 74 32 27 2c 20 27 4f 70 74 33 27 5d 0a 20 Opt2', 'Opt3'].
0450: 20 3c 2f 73 63 72 69 70 74 3e 0a 3c 2f 73 65 6c </script>.</sel
0460: 65 63 74 2d 74 65 73 74 3e 0a 0a 3c 73 65 6c 65 ect-test>..<sele
0470: 63 74 2d 73 69 6e 67 6c 65 2d 6f 70 74 69 6f 6e ct-single-option
0480: 3e 0a 20 20 3c 6f 70 74 69 6f 6e 20 73 65 6c 65 >. <option sele
0490: 63 74 65 64 3e 28 63 68 6f 6f 73 65 29 3c 2f 6f cted>(choose)</o
04a0: 70 74 69 6f 6e 3e 0a 3c 2f 73 65 6c 65 63 74 2d ption>.</select-
04b0: 73 69 6e 67 6c 65 2d 6f 70 74 69 6f 6e 3e 0a 0a single-option>..
04c0: 3c 73 65 6c 65 63 74 2d 65 61 63 68 2d 6f 70 74 <select-each-opt
04d0: 69 6f 6e 3e 0a 20 20 3c 6f 70 74 69 6f 6e 20 65 ion>. <option e
04e0: 61 63 68 3d 7b 20 6f 70 74 2c 20 69 20 69 6e 20 ach={ opt, i in
04f0: 6f 70 74 73 2e 64 61 74 61 20 7d 20 73 65 6c 65 opts.data } sele
0500: 63 74 65 64 3d 7b 20 69 20 3d 3d 20 31 20 7d 3e cted={ i == 1 }>
0510: 7b 20 6f 70 74 20 7d 3c 2f 6f 70 74 69 6f 6e 3e { opt }</option>
0520: 0a 3c 2f 73 65 6c 65 63 74 2d 65 61 63 68 2d 6f .</select-each-o
0530: 70 74 69 6f 6e 3e 0a 0a 3c 73 65 6c 65 63 74 2d ption>..<select-
0540: 65 61 63 68 2d 6f 70 74 69 6f 6e 2d 70 72 6f 6d each-option-prom
0550: 70 74 3e 0a 20 20 3c 6f 70 74 69 6f 6e 3e 28 63 pt>. <option>(c
0560: 68 6f 6f 73 65 29 3c 2f 6f 70 74 69 6f 6e 3e 0a hoose)</option>.
0570: 20 20 3c 6f 70 74 69 6f 6e 20 65 61 63 68 3d 7b <option each={
0580: 20 6f 70 74 2c 20 69 20 69 6e 20 6f 70 74 73 2e opt, i in opts.
0590: 64 61 74 61 20 7d 20 73 65 6c 65 63 74 65 64 3d data } selected=
05a0: 7b 20 69 20 3d 3d 20 31 20 7d 3e 7b 20 6f 70 74 { i == 1 }>{ opt
05b0: 20 7d 3c 2f 6f 70 74 69 6f 6e 3e 0a 3c 2f 73 65 }</option>.</se
05c0: 6c 65 63 74 2d 65 61 63 68 2d 6f 70 74 69 6f 6e lect-each-option
05d0: 2d 70 72 6f 6d 70 74 3e 0a 0a 3c 73 65 6c 65 63 -prompt>..<selec
05e0: 74 2d 65 61 63 68 2d 74 77 6f 2d 6f 70 74 69 6f t-each-two-optio
05f0: 6e 73 3e 0a 20 20 3c 6f 70 74 69 6f 6e 20 65 61 ns>. <option ea
0600: 63 68 3d 7b 20 6f 70 74 2c 20 69 20 69 6e 20 6f ch={ opt, i in o
0610: 70 74 73 2e 64 61 74 61 20 7d 3e 7b 20 6f 70 74 pts.data }>{ opt
0620: 20 7d 3c 2f 6f 70 74 69 6f 6e 3e 0a 20 20 3c 6f }</option>. <o
0630: 70 74 69 6f 6e 20 65 61 63 68 3d 7b 20 6f 70 74 ption each={ opt
0640: 2c 20 69 20 69 6e 20 6f 70 74 73 2e 64 61 74 61 , i in opts.data
0650: 20 7d 20 73 65 6c 65 63 74 65 64 3d 7b 20 69 20 } selected={ i
0660: 3d 3d 20 31 20 7d 3e 7b 20 6f 70 74 20 7d 3c 2f == 1 }>{ opt }</
0670: 6f 70 74 69 6f 6e 3e 0a 3c 2f 73 65 6c 65 63 74 option>.</select
0680: 2d 65 61 63 68 2d 74 77 6f 2d 6f 70 74 69 6f 6e -each-two-option
0690: 73 3e 0a 0a 3c 73 65 6c 65 63 74 2d 6f 70 74 67 s>..<select-optg
06a0: 72 6f 75 70 2d 65 61 63 68 2d 6f 70 74 69 6f 6e roup-each-option
06b0: 3e 0a 20 20 3c 6f 70 74 67 72 6f 75 70 20 6c 61 >. <optgroup la
06c0: 62 65 6c 3d 22 47 72 6f 75 70 20 31 22 3e 0a 20 bel="Group 1">.
06d0: 20 20 20 3c 6f 70 74 69 6f 6e 20 65 61 63 68 3d <option each=
06e0: 7b 20 6f 70 74 20 69 6e 20 6f 70 74 73 2e 64 61 { opt in opts.da
06f0: 74 61 20 7d 3e 7b 20 6f 70 74 20 7d 3c 2f 6f 70 ta }>{ opt }</op
0700: 74 69 6f 6e 3e 0a 20 20 3c 2f 6f 70 74 67 72 6f tion>. </optgro
0710: 75 70 3e 0a 3c 2f 73 65 6c 65 63 74 2d 6f 70 74 up>.</select-opt
0720: 67 72 6f 75 70 2d 65 61 63 68 2d 6f 70 74 69 6f group-each-optio
0730: 6e 3e 0a 0a 3c 73 65 6c 65 63 74 2d 6f 70 74 67 n>..<select-optg
0740: 72 6f 75 70 2d 65 61 63 68 2d 6f 70 74 69 6f 6e roup-each-option
0750: 2d 70 72 6f 6d 70 74 3e 0a 20 20 3c 6f 70 74 67 -prompt>. <optg
0760: 72 6f 75 70 20 6c 61 62 65 6c 3d 22 47 72 6f 75 roup label="Grou
0770: 70 20 31 22 3e 0a 20 20 20 20 3c 6f 70 74 69 6f p 1">. <optio
0780: 6e 20 65 61 63 68 3d 7b 20 6f 70 74 20 69 6e 20 n each={ opt in
0790: 6f 70 74 73 2e 64 61 74 61 20 7d 3e 7b 20 6f 70 opts.data }>{ op
07a0: 74 20 7d 3c 2f 6f 70 74 69 6f 6e 3e 0a 20 20 3c t }</option>. <
07b0: 2f 6f 70 74 67 72 6f 75 70 3e 0a 20 20 3c 6f 70 /optgroup>. <op
07c0: 74 69 6f 6e 20 73 65 6c 65 63 74 65 64 3e 28 63 tion selected>(c
07d0: 68 6f 6f 73 65 29 3c 2f 6f 70 74 69 6f 6e 3e 0a hoose)</option>.
07e0: 3c 2f 73 65 6c 65 63 74 2d 6f 70 74 67 72 6f 75 </select-optgrou
07f0: 70 2d 65 61 63 68 2d 6f 70 74 69 6f 6e 2d 70 72 p-each-option-pr
0800: 6f 6d 70 74 3e 0a 0a 3c 73 65 6c 65 63 74 2d 74 ompt>..<select-t
0810: 77 6f 2d 6f 70 74 67 72 6f 75 70 2d 65 61 63 68 wo-optgroup-each
0820: 2d 6f 70 74 69 6f 6e 3e 0a 20 20 3c 6f 70 74 67 -option>. <optg
0830: 72 6f 75 70 20 6c 61 62 65 6c 3d 22 47 72 6f 75 roup label="Grou
0840: 70 20 31 22 3e 0a 20 20 20 20 3c 6f 70 74 69 6f p 1">. <optio
0850: 6e 20 65 61 63 68 3d 7b 20 6f 70 74 20 69 6e 20 n each={ opt in
0860: 6f 70 74 73 2e 64 61 74 61 20 7d 3e 7b 20 6f 70 opts.data }>{ op
0870: 74 20 7d 3c 2f 6f 70 74 69 6f 6e 3e 0a 20 20 3c t }</option>. <
0880: 2f 6f 70 74 67 72 6f 75 70 3e 0a 20 20 3c 6f 70 /optgroup>. <op
0890: 74 69 6f 6e 20 73 65 6c 65 63 74 65 64 3e 28 63 tion selected>(c
08a0: 68 6f 6f 73 65 29 3c 2f 6f 70 74 69 6f 6e 3e 0a hoose)</option>.
08b0: 20 20 3c 6f 70 74 67 72 6f 75 70 20 6c 61 62 65 <optgroup labe
08c0: 6c 3d 22 47 72 6f 75 70 20 32 22 3e 0a 20 20 20 l="Group 2">.
08d0: 20 3c 6f 70 74 69 6f 6e 20 65 61 63 68 3d 7b 20 <option each={
08e0: 6f 70 74 20 69 6e 20 6f 70 74 73 2e 64 61 74 61 opt in opts.data
08f0: 20 7d 3e 7b 20 6f 70 74 20 7d 3c 2f 6f 70 74 69 }>{ opt }</opti
0900: 6f 6e 3e 0a 20 20 3c 2f 6f 70 74 67 72 6f 75 70 on>. </optgroup
0910: 3e 0a 3c 2f 73 65 6c 65 63 74 2d 74 77 6f 2d 6f >.</select-two-o
0920: 70 74 67 72 6f 75 70 2d 65 61 63 68 2d 6f 70 74 ptgroup-each-opt
0930: 69 6f 6e 3e 0a 0a 3c 73 65 6c 65 63 74 2d 65 61 ion>..<select-ea
0940: 63 68 2d 6f 70 74 67 72 6f 75 70 3e 0a 20 20 3c ch-optgroup>. <
0950: 6f 70 74 67 72 6f 75 70 20 65 61 63 68 3d 7b 20 optgroup each={
0960: 67 72 6f 75 70 20 69 6e 20 67 72 6f 75 70 73 20 group in groups
0970: 7d 20 6c 61 62 65 6c 3d 7b 20 67 72 6f 75 70 20 } label={ group
0980: 7d 3e 0a 20 20 20 20 3c 6f 70 74 69 6f 6e 20 65 }>. <option e
0990: 61 63 68 3d 7b 20 6f 70 74 20 69 6e 20 70 61 72 ach={ opt in par
09a0: 65 6e 74 2e 6f 70 74 73 2e 64 61 74 61 20 7d 3e ent.opts.data }>
09b0: 7b 20 6f 70 74 20 7d 3c 2f 6f 70 74 69 6f 6e 3e { opt }</option>
09c0: 0a 20 20 3c 2f 6f 70 74 67 72 6f 75 70 3e 0a 20 . </optgroup>.
09d0: 20 3c 73 63 72 69 70 74 3e 0a 20 20 20 20 74 68 <script>. th
09e0: 69 73 2e 67 72 6f 75 70 73 20 3d 20 5b 27 47 72 is.groups = ['Gr
09f0: 6f 75 70 20 31 27 2c 20 27 47 72 6f 75 70 20 32 oup 1', 'Group 2
0a00: 27 5d 0a 20 20 3c 2f 73 63 72 69 70 74 3e 0a 3c ']. </script>.<
0a10: 2f 73 65 6c 65 63 74 2d 65 61 63 68 2d 6f 70 74 /select-each-opt
0a20: 67 72 6f 75 70 3e 0a group>.