<html>
<head>
<title>Select dropdown</title>
<style>
form { flow:row(label,select); border-spacing: 0.5em; margin:0.5em;}
form > label { font:system; line-height:1.5em; display:block; min-width: max-content; text-align:right; }
form > select { }
select[name=ddcm] option
{
padding-left:20px;
}
select[name=ddcm] option:checked
{
foreground-image:url(stock:checkmark);
foreground-repeat:no-repeat;
foreground-size:7px;
foreground-position:8px 50%;
}
select[name=ddn]:empty > caption { color:red; }
</style>
<script type="text/tiscript">
event click $(button#get)
{
var v = $(form).value;
$(#out).value = String.printf("%V",v);
}
event click $(button#set)
{
var v = {
ddm: ["Five","Six","Seven"],
dde: "Five",
dd: "Five",
ddn: undefined // nullable
};
$(form).value = v;
$(#out).value = String.printf("%V",$(form).value);
}
event click $(button#set-by-dom-ref)
{
for(var option in $$(option.toset))
option.execCommand("set-current");
}
event change $(select) {
stdout.println("change", this, "value", this.value);
}
event click $(#populate) {
const countries = [
"Afghanistan",
"Albania",
"Algeria",
"American Samoa",
"Andorra",
"Angola",
"Anguilla",
"Antarctica",
"Antigua And Barbuda",
"Argentina",
"Armenia"];
var select = $(select[name=dd]);
select.options.clear();
for(var (i,country) in countries)
select.options.$append(<option value={i}>{country}</option>);
select.value = 7;
}
</script>
</head>
<body>
<h3><select|dropdown> variants</h3>
<button #get>Get values</button>
<button #set>Set values</button>
<button #set-by-dom-ref>Set by DOM element reference</button>
<button #populate>Populate options in first select</button>
<form>
<label>dropdown:</label>
<select name=dd novalue="select country">
<OPTION VALUE=1 >Afghanistan</OPTION><OPTION VALUE=2 >Albania</OPTION><OPTION VALUE=3 >Algeria</OPTION><OPTION VALUE=4 >American Samoa</OPTION><OPTION VALUE=5 >Andorra</OPTION><OPTION VALUE=6 >Angola</OPTION><OPTION VALUE=7 >Anguilla</OPTION><OPTION VALUE=8 >Antarctica</OPTION><OPTION VALUE=9 >Antigua And Barbuda</OPTION><OPTION VALUE=10 >Argentina</OPTION><OPTION VALUE=11 >Armenia</OPTION><OPTION VALUE=12 >Aruba</OPTION><OPTION VALUE=13 >Australia</OPTION><OPTION VALUE=14 >Austria</OPTION><OPTION VALUE=15 >Azerbaijan</OPTION><OPTION VALUE=16 >Bahamas</OPTION><OPTION VALUE=17 >Bahrain</OPTION><OPTION VALUE=18 >Bangladesh</OPTION><OPTION VALUE=19 >Barbados</OPTION><OPTION VALUE=20 >Belarus</OPTION><OPTION VALUE=21 >Belgium</OPTION><OPTION VALUE=22 >Belize</OPTION><OPTION VALUE=23 >Benin</OPTION><OPTION VALUE=24 >Bermuda</OPTION><OPTION VALUE=25 >Bhutan</OPTION><OPTION VALUE=26 >Bolivia</OPTION><OPTION VALUE=27 >Bosnia and Herzegovina</OPTION><OPTION VALUE=28 >Botswana</OPTION><OPTION VALUE=29 >Bouvet Island</OPTION><OPTION VALUE=30 >Brazil</OPTION><OPTION VALUE=31 >British Indian Ocean Territory</OPTION><OPTION VALUE=32 >Brunei Darussalam</OPTION><OPTION VALUE=33 >Bulgaria</OPTION><OPTION VALUE=34 >Burkina Faso</OPTION><OPTION VALUE=35 >Burundi</OPTION><OPTION VALUE=36 >Cambodia</OPTION><OPTION VALUE=37 >Cameroon</OPTION><OPTION VALUE=38 class="i-am-now-in">Canada</OPTION><OPTION VALUE=39 >Cape Verde</OPTION><OPTION VALUE=40 >Cayman Islands</OPTION><OPTION VALUE=41 >Central African Republic</OPTION><OPTION VALUE=42 >Chad</OPTION><OPTION VALUE=43 >Chile</OPTION><OPTION VALUE=44 >China</OPTION><OPTION VALUE=45 >Christmas Island</OPTION><OPTION VALUE=46 >Cocos (Keeling) Islands</OPTION><OPTION VALUE=47 >Colombia</OPTION><OPTION VALUE=48 >Comoros</OPTION><OPTION VALUE=49 >Congo</OPTION><OPTION VALUE=50 >Congo, Democratic Republic</OPTION><OPTION VALUE=51 >Cook Islands</OPTION><OPTION VALUE=52 >Costa Rica</OPTION><OPTION VALUE=53 >Cote d'Ivoire</OPTION><OPTION VALUE=54 >Croatia</OPTION><OPTION VALUE=55 >Cuba</OPTION><OPTION VALUE=56 >Cyprus</OPTION><OPTION VALUE=57 >Czech Republic</OPTION><OPTION VALUE=58 >Denmark</OPTION><OPTION VALUE=59 >Djibouti</OPTION><OPTION VALUE=60 >Dominica</OPTION><OPTION VALUE=61 >Dominican Republic</OPTION><OPTION VALUE=62 >East Timor</OPTION><OPTION VALUE=63 >Ecuador</OPTION><OPTION VALUE=64 >Egypt</OPTION><OPTION VALUE=65 >El Salvador</OPTION><OPTION VALUE=66 >Equatorial Guinea</OPTION><OPTION VALUE=67 >Eritrea</OPTION><OPTION VALUE=68 >Estonia</OPTION><OPTION VALUE=69 >Ethiopia</OPTION><OPTION VALUE=70 >Falkland Islands</OPTION><OPTION VALUE=71 >Faroe Islands</OPTION><OPTION VALUE=72 >Fiji</OPTION><OPTION VALUE=73 >Finland</OPTION><OPTION VALUE=74 >France</OPTION><OPTION VALUE=75 >French Guiana</OPTION><OPTION VALUE=76 >French Polynesia</OPTION><OPTION VALUE=77 >French Southern Territories</OPTION><OPTION VALUE=78 >Gabon</OPTION><OPTION VALUE=79 >Gambia</OPTION><OPTION VALUE=80 >Georgia</OPTION><OPTION VALUE=81 >Germany</OPTION><OPTION VALUE=82 >Ghana</OPTION><OPTION VALUE=83 >Gibraltar</OPTION><OPTION VALUE=84 >Greece</OPTION><OPTION VALUE=85 >Greenland</OPTION><OPTION VALUE=86 >Grenada</OPTION><OPTION VALUE=87 >Guadeloupe</OPTION><OPTION VALUE=88 >Guam</OPTION><OPTION VALUE=89 >Guatemala</OPTION><OPTION VALUE=90 >Guinea</OPTION><OPTION VALUE=91 >Guinea-Bissau</OPTION><OPTION VALUE=92 >Guyana</OPTION><OPTION VALUE=93 >Haiti</OPTION><OPTION VALUE=94 >Heard and Mc Donald Islands</OPTION><OPTION VALUE=95 >Holy See - Vatican City</OPTION><OPTION VALUE=96 >Honduras</OPTION><OPTION VALUE=97 >Hong Kong</OPTION><OPTION VALUE=98 >Hungary</OPTION><OPTION VALUE=99 >Iceland</OPTION><OPTION VALUE=100 >India</OPTION><OPTION VALUE=101 >Indonesia</OPTION><OPTION VALUE=102 >Iran, Islamic Republic</OPTION><OPTION VALUE=103 >Iraq</OPTION><OPTION VALUE=104 >Ireland</OPTION><OPTION VALUE=105 >Israel</OPTION><OPTION VALUE=106 >Italy</OPTION><OPTION VALUE=107 >Jamaica</OPTION><OPTION VALUE=108 >Japan</OPTION><OPTION VALUE=109 >Jordan</OPTION><OPTION VALUE=110 >Kazakstan</OPTION><OPTION VALUE=111 >Kenya</OPTION><OPTION VALUE=112 >Kiribati</OPTION><OPTION VALUE=113 >Korea, Peoples Republic</OPTION><OPTION VALUE=114 >Korea, Republic of</OPTION><OPTION VALUE=115 >Kuwait</OPTION><OPTION VALUE=116 >Kyrgyzstan</OPTION><OPTION VALUE=117 >Lao People's Republic</OPTION><OPTION VALUE=118 >Latvia</OPTION><OPTION VALUE=119 >Lebanon</OPTION><OPTION VALUE=120 >Lesotho</OPTION><OPTION VALUE=121 >Liberia</OPTION><OPTION VALUE=122 >Libyan Arab Jamahiriya</OPTION><OPTION VALUE=123 >Liechtenstein</OPTION><OPTION VALUE=124 >Lithuania</OPTION><OPTION VALUE=125 >Luxembourg</OPTION><OPTION VALUE=126 >Macau</OPTION><OPTION VALUE=127 >Macedonia</OPTION><OPTION VALUE=128 >Madagascar</OPTION><OPTION VALUE=129 >Malawi</OPTION><OPTION VALUE=130 >Malaysia</OPTION><OPTION VALUE=131 >Maldives</OPTION><OPTION VALUE=132 >Mali</OPTION><OPTION VALUE=133 >Malta</OPTION><OPTION VALUE=134 >Marshall Islands</OPTION><OPTION VALUE=135 >Martinique</OPTION><OPTION VALUE=136 >Mauritania</OPTION><OPTION VALUE=137 >Mauritius</OPTION><OPTION VALUE=138 >Mayotte</OPTION><OPTION VALUE=139 >Mexico</OPTION><OPTION VALUE=140 >Micronesia, Federated States</OPTION><OPTION VALUE=141 >Moldova, Republic of</OPTION><OPTION VALUE=142 >Monaco</OPTION><OPTION VALUE=143 >Mongolia</OPTION><OPTION VALUE=144 >Montserrat</OPTION><OPTION VALUE=145 >Morocco</OPTION><OPTION VALUE=146 >Mozambique</OPTION><OPTION VALUE=147 >Myanmar</OPTION><OPTION VALUE=148 >Namibia</OPTION><OPTION VALUE=149 >Nauru</OPTION><OPTION VALUE=150 >Nepal</OPTION><OPTION VALUE=151 >Netherlands</OPTION><OPTION VALUE=152 >Netherlands Antilles</OPTION><OPTION VALUE=153 >New Caledonia</OPTION><OPTION VALUE=154 >New Zealand</OPTION><OPTION VALUE=155 >Nicaragua</OPTION><OPTION VALUE=156 >Niger</OPTION><OPTION VALUE=157 >Nigeria</OPTION><OPTION VALUE=158 >Niue</OPTION><OPTION VALUE=159 >Norfolk Island</OPTION><OPTION VALUE=160 >Northern Mariana Islands</OPTION><OPTION VALUE=161 >Norway</OPTION><OPTION VALUE=162 >Oman</OPTION><OPTION VALUE=163 >Pakistan</OPTION><OPTION VALUE=164 >Palau</OPTION><OPTION VALUE=165 >Palestinian Territory</OPTION><OPTION VALUE=166 >Panama</OPTION><OPTION VALUE=167 >Papua New Guinea</OPTION><OPTION VALUE=168 >Paraguay</OPTION><OPTION VALUE=169 >Peru</OPTION><OPTION VALUE=170 >Philippines</OPTION><OPTION VALUE=171 >Pitcairn</OPTION><OPTION VALUE=172 >Poland</OPTION><OPTION VALUE=173 >Portugal</OPTION><OPTION VALUE=174 >Puerto Rico</OPTION><OPTION VALUE=175 >Qatar</OPTION><OPTION VALUE=176 >Reunion</OPTION><OPTION VALUE=177 >Romania</OPTION><OPTION VALUE=178 >Russian Federation</OPTION><OPTION VALUE=179 >Rwanda</OPTION><OPTION VALUE=180 >St. Helena</OPTION><OPTION VALUE=181 >Saint Kitts and Nevis</OPTION><OPTION VALUE=182 >Saint Lucia</OPTION><OPTION VALUE=183 >St. Pierre and Miquelon</OPTION><OPTION VALUE=184 >Saint Vincent - Grenadines</OPTION><OPTION VALUE=185 >Samoa (Independent)</OPTION><OPTION VALUE=186 >San Marino</OPTION><OPTION VALUE=187 >Sao Tome and Principe</OPTION><OPTION VALUE=188 >Saudi Arabia</OPTION><OPTION VALUE=189 >Senegal</OPTION><OPTION VALUE=190 >Seychelles</OPTION><OPTION VALUE=191 >Sierra Leone</OPTION><OPTION VALUE=192 >Singapore</OPTION><OPTION VALUE=193 >Slovakia</OPTION><OPTION VALUE=194 >Slovenia</OPTION><OPTION VALUE=195 >Solomon Islands</OPTION><OPTION VALUE=196 >Somalia</OPTION><OPTION VALUE=197 >South Africa</OPTION><OPTION VALUE=198 >South Georgia - South Sandwich</OPTION><OPTION VALUE=199 >Spain</OPTION><OPTION VALUE=200 >Sri Lanka</OPTION><OPTION VALUE=201 >Sudan</OPTION><OPTION VALUE=202 >Suriname</OPTION><OPTION VALUE=203 >Svalbard - Jan Mayen Islands</OPTION><OPTION VALUE=204 >Swaziland</OPTION><OPTION VALUE=205 >Sweden</OPTION><OPTION VALUE=206 >Switzerland</OPTION><OPTION VALUE=207 >Syrian Arab Republic</OPTION><OPTION VALUE=208 >Taiwan</OPTION><OPTION VALUE=209 >Tajikistan</OPTION><OPTION VALUE=210 >Tanzania</OPTION><OPTION VALUE=211 >Thailand</OPTION><OPTION VALUE=212 >Togo</OPTION><OPTION VALUE=213 >Tokelau</OPTION><OPTION VALUE=214 >Tonga</OPTION><OPTION VALUE=215 >Trinidad and Tobago</OPTION><OPTION VALUE=216 >Tunisia</OPTION><OPTION VALUE=217 >Turkey</OPTION><OPTION VALUE=218 >Turkmenistan</OPTION><OPTION VALUE=219 >Turks and Caicos Islands</OPTION><OPTION VALUE=220 >Tuvalu</OPTION><OPTION VALUE=221 >Uganda</OPTION><OPTION VALUE=222 >Ukraine</OPTION><OPTION VALUE=223 >United Arab Emirates</OPTION><OPTION VALUE=224 >United Kingdom</OPTION><OPTION VALUE=225 >United States</OPTION><OPTION VALUE=226 >United States Minor Islands</OPTION><OPTION VALUE=227 >Uruguay</OPTION><OPTION VALUE=228 >Uzbekistan</OPTION><OPTION VALUE=229 >Vanuatu</OPTION><OPTION VALUE=230 >Venezuela</OPTION><OPTION VALUE=231 >Viet Nam</OPTION><OPTION VALUE=232 >Virgin Islands (British)</OPTION><OPTION VALUE=233 >Virgin Islands (U.S.)</OPTION><OPTION VALUE=234 >Wallis and Futuna Islands</OPTION><OPTION VALUE=235 >Western Sahara</OPTION><OPTION VALUE=236 >Yemen</OPTION><OPTION VALUE=237 >Yugoslavia</OPTION><OPTION VALUE=238 >Zambia</OPTION><OPTION VALUE=239 >Zimbabwe</OPTION>
</select>
<label>combobox (editable select):</label>
<select name=dde editable>
<option>One</option>
<option>Two</option>
<option.toset>Three</option>
<option selected>Four</option>
<option>Five</option>
<option>Six</option>
<option>Seven</option>
<option>Eight</option>
<option>Nine</option>
<option>Ten</option>
<option>Eleven</option>
<option>Twelve</option>
</select>
<label>dropdown multiple:</label><select name=ddm multiple>
<option>One</option>
<option>Two</option>
<option.toset>Three</option>
<option selected>Four</option>
<option>Five</option>
<option>Six</option>
<option>Seven</option>
<option>Eight</option>
<option>Nine</option>
<option>Ten</option>
<option>Eleven</option>
<option>Twelve</option>
</select>
<label>dropdown with custom state styling:</label>
<select name=ddcm>
<option>One</option>
<option>Two</option>
<option.toset>Three</option>
<option selected>Four</option>
<option>Five</option>
<option>Six</option>
<option>Seven</option>
<option>Eight</option>
<option>Nine</option>
<option>Ten</option>
<option>Eleven</option>
<option>Twelve</option>
</select>
<label>nullable dropdown:</label>
<select name=ddn novalue="(nothing)">
<option>One</option>
<option>Two</option>
<option.toset>Three</option>
<option>Four</option>
<option>Five</option>
<option>Six</option>
<option>Seven</option>
<option>Eight</option>
<option>Nine</option>
<option>Ten</option>
<option>Eleven</option>
<option>Twelve</option>
</select>
<label>dropdown with groups:</label><select name=ddog>
<option>One</option>
<optgroup label="2..4">
<option>Two</option>
<option.toset>Three</option>
<option>Four</option>
</optgroup>
<optgroup>
<caption>5..8</caption>
<option>Five</option>
<option>Six</option>
<option>Seven</option>
<option>Eight</option>
</optgroup>
<option>Nine</option>
<option>Ten</option>
<option>Eleven</option>
<option>Twelve</option>
</select>
</form>
<pre #out></pre>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
