dijit
Version:
Dijit provides a complete collection of user interface controls based on Dojo, giving you the power to create web applications that are highly optimized for usability, performance, internationalization, accessibility, but above all deliver an incredible u
1,224 lines (1,155 loc) • 47.3 kB
HTML
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>dijit/form/Select test</title>
<style>
.ark { text-decoration: underline; }
form {
margin: 10px 0px;
border: solid gray 2px;
}
.area {
border: 1px solid gray;
padding: 2px;
display: inline;
white-space: nowrap;
}
h3 {
margin: 0;
}
body .customStyled .dijitSelect,
body .customStyled .dijitSelect .dijitButtonContents {
border-width: 2px;
border-color: blue;
}
body .customStyled .dijitSelect .dijitInputField {
padding: 5px;
font-family: Arial;
font-size: 150%;
}
.dj_a11y .dijitSelect,
.dj_a11y .dijitSelect .dijitButtonContents {
border-width: medium ;
}
.dj_a11y .dijitSelect,
.dj_a11y .customStyled .dijitSelect,
.dj_a11y .dijitSelect *,
.dj_a11y .customStyled .dijitSelect * {
background-color: white ;
background-image: none ;
border-color: black ;
color: black ;
}
</style>
<script type="text/javascript" src="../boilerplate.js"></script>
<script type="text/javascript">
require([
"doh/runner",
"dojo/_base/array",
"dojo/_base/lang",
"dojo/parser",
"dojo/data/ItemFileReadStore", // for testing old API (remove for 2.0)
"dojo/data/ItemFileWriteStore", // for testing old API (remove for 2.0)
"dojo/store/Memory",
"dojo/store/Observable",
"dijit/focus",
"dijit/registry",
"dijit/form/Select",
"dijit/form/Button",
"dijit/form/Form",
"dijit/Dialog",
"dijit/Tooltip",
"dijit/tests/helpers",
// Used by parser
"dijit/Toolbar",
"dijit/form/ToggleButton",
"dojo/domReady!"
], function(doh, array, lang, parser, ItemFileReadStore, ItemFileWriteStore, Memory, Observable,
focus, registry, Select, Button, Form, Dialog, Tooltip, helpers){
var numOptions = 0;
var numChanges = 0;
var addNum = 10;
// Add test=true to the URL to run unit tests.
// Add testPerformance=true to the URL to run performance tests - note SLOW to run
var test = /mode=test/i.test(window.location.href),
testPerformance = /mode=benchmark/i.test(window.location.href);
// dojo/data (legacy) data stores
var data = {
identifier: "value",
label: "label",
items: [
{value: "AL", label: "Alabama"},
{value: "AK", label: "Alaska"},
{value: "AZ", label: "Arizona"},
{value: "AR", label: "Arkansas"},
{value: "CA", label: "California"},
{value: "CO", label: "Colorado"},
{value: "CT", label: "Connecticut"}
]
};
var data2 = {
identifier: "value",
label: "label",
items: [
{value: "DE", label: "Delaware"},
{value: "FL", label: "Florida"},
{value: "GA", label: "Georgia"},
{value: "HI", label: "Hawaii"},
{value: "ID", label: "Idaho"},
{value: "IL", label: "Illinois"},
{value: "IN", label: "Indiana"}
]
};
readStore = new ItemFileReadStore({data: lang.clone(data)});
store2 = new ItemFileReadStore({data: lang.clone(data2)});
writeStore = new ItemFileWriteStore({data: lang.clone(data)});
// dojo/store (new API) data stores
var vals = [
{value: "AL", label: "Alabama"},
{value: "AK", label: "Alaska"},
{value: "AZ", label: "Arizona"},
{value: "AR", label: "Arkansas"},
{value: "CA", label: "Calif<a href='javascript:alert()'>ornia</a>"},
{value: "CO", label: "Colorado"},
{value: "CT", label: "Connecticut"}
];
var vals2 = [
{value: "DE", label: "Delaware"},
{value: "FL", label: "Florida"},
{value: "GA", label: "Georgia"},
{value: "HI", label: "Hawaii"},
{value: "ID", label: "Idaho"},
{value: "IL", label: "Illinois"},
{value: "IN", label: "Indiana"}
];
memoryStore = new Memory({
idProperty: "value",
data: lang.clone(vals)
});
memoryStore2 = new Memory({
idProperty: "value",
data: lang.clone(vals2)
});
memoryStore3 = new Observable(new Memory({ // updates will reflect to select
idProperty: "value",
data: lang.clone(vals)
}));
parser.parse();
s1.on("change", function(val){
console.log("First Select Changed to " + val);
numChanges++;
});
var programmatic = new Select({
options: [
{ label: 'foo', value: 'foo', selected: true },
{ label: 'bar', value: 'bar' }
],
"aria-label":"programmatic"
});
programmatic.placeAt('testProgramatic');
var programmaticDisabled = new Select({
disabled: true,
options: [
{ label: 'foo', value: 'foo', selected: true },
{ label: 'bar', value: 'bar' }
],
"aria-label":"programmatic disabled"
});
programmaticDisabled.placeAt('testProgramatic');
if(test){
doh.register("API", [
{
name: "test_set",
timeout: 5000,
runTest: function(t){
var d = new doh.Deferred();
t.is("VA", form.get("value").s1, "initial value");
s1.set("value", s1.getOptions(2)); // set s1 to a valid value via index search
t.is("WA", s1.value);
setTimeout(function(){
try{ // allow onChange to fire
// set s1 to non-existing value, which (currently) makes the Select pick
// the first option in the drop down
s1.set("value", "UT");
t.is("TN", s1.value);
setTimeout(function(){
try{ // allow onChange to fire
t.is(2, numChanges);
// prevent onChange from firing
s1.set("value", "FL", false);
setTimeout(function(){
try{ // allow onChange to fire if it's wrong
t.is(2, numChanges);
d.callback(true);
}catch(e){
d.errback(e);
}
}, 0)
}catch(e){
d.errback(e);
}
}, 0);
}catch(e){
d.errback(e);
}
}, 0);
return d;
}
},
{
name: "test_set by number",
timeout: 5000,
runTest: function(t){
var d = new doh.Deferred();
t.is(100, form.get("value").s5, "initial value");
s5.set("value", s5.getOptions(2)); // set s5 to a valid value via index search
t.is(102, s5.value);
setTimeout(function(){
try{ // allow onChange to fire
// set s5 to non-existing value, which (currently) makes the Select pick
// the first option in the drop down
s5.set("value", 200);
t.is(100, s5.value);
setTimeout(function(){
try{ // allow onChange to fire
t.is(2, numChanges);
// prevent onChange from firing
s5.set("value", 103, false);
t.t(/.*No Move.*/.test(s5.containerNode.innerHTML), s5.containerNode.innerHTML);
setTimeout(function(){
try{ // allow onChange to fire if it's wrong
t.is(2, numChanges);
d.callback(true);
}catch(e){
d.errback(e);
}
}, 0)
}catch(e){
d.errback(e);
}
}, 0);
}catch(e){
d.errback(e);
}
}, 0);
return d;
}
},
{
name: 'test_disabled',
runTest: function(t){
t.is(testDisabled.disabled, true);
}
},
{
name: 'test_programmatic',
runTest: function(t){
t.is(programmatic.options.length, 2);
t.is(programmaticDisabled.options.length, 2);
t.is(programmaticDisabled.disabled, true);
}
},
function test_setOptions(t){
programmatic.set('options', data2.items);
programmatic.reset();
t.is(7, programmatic.getOptions().length);
t.is("DE", programmatic.value);
},
// Test that destroying a Select destroys the internal Menu and MenuItems too
{
name: "test_destroy",
timeout: 5000,
runTest: function(t){
var oldCnt = registry.length;
s1.destroy();
var newCnt = registry.length;
t.t(newCnt < oldCnt + 3, "should have destroyed many widgets, went from " + oldCnt + " to " + newCnt);
}
},
{
name: "aria attributes",
timeout: 2000,
runTest: function(){
var d = new doh.Deferred();
select = registry.byId("s2");
doh.is("listbox", select._popupStateNode.getAttribute("role"), "select _popupStateNode role");
doh.t(select._popupStateNode.getAttribute("aria-haspopup"), "aria-haspopup on select");
doh.f(select._popupStateNode.getAttribute("aria-expanded"), "initially false aria-expanded");
doh.f(select._popupStateNode.getAttribute("aria-owns"), "initially missing aria-owns");
select.openDropDown();
setTimeout(d.getTestCallback(function(){
doh.t(select._popupStateNode.getAttribute("aria-expanded"), "now aria-expanded should be true");
doh.is("s2_menu", select._popupStateNode.getAttribute("aria-owns"), "should aria-own the menu");
// Check roles and attributes on the Menu
var menu = registry.byId("s2_menu");
doh.is("listbox", menu.domNode.getAttribute("role"), "Dlg.domNode should have a role");
doh.is("s2", menu.domNode.getAttribute("aria-labelledby"), "aria-labelledby should point back to button");
}), 0);
return d;
},
tearDown: function(){
select.closeDropDown();
}
}
]);
// Test legacy dojo/data API, remove for 2.0
doh.register("dojo/data store", [
// Tests that when the currently selected item is changed in the data store,
// the change is reflected in the Select widget
function test_changeSelected(t){
t.is("AL", s11.value);
t.t(/<span.*>Alabama<\/span>/i.test(s11.containerNode.innerHTML), "expected Alabama but got " + s11.containerNode.innerHTML);
s11.set("value", ["AK"]); // test array
t.is("AK", s11.value);
t.t(/<span.*>Alaska<\/span>/i.test(s11.containerNode.innerHTML), "expected Alaska but got " + s11.containerNode.innerHTML);
var d = new doh.Deferred();
writeStore.fetchItemByIdentity({
identity: "AK",
onItem: d.getTestCallback(function(item){
writeStore.setValue(item, "label", "North Pole");
t.t(/<span.*>North Pole<\/span>/i.test(s11.containerNode.innerHTML), "expected North Pole but got " + s11.containerNode.innerHTML);
})
});
return d;
},
// Test that a delete of the non-selected item will remove that item from the Select's
// list of options.
function test_deleteNonSelected(t){
t.is(7, s11.getOptions().length);
t.is("AK", s11.value);
var d = new doh.Deferred();
writeStore.fetchItemByIdentity({
identity: "AZ",
onItem: d.getTestCallback(function(item){
writeStore.deleteItem(item);
t.is(6, s11.getOptions().length);
})
});
return d;
},
// Test that a delete of the selected item will remove that item from the Select's
// list of options, and switch to a new selected item
function test_deleteSelected(t){
t.is(6, s11.getOptions().length);
t.is("AK", s11.value);
var d = new doh.Deferred();
writeStore.fetchItemByIdentity({
identity: "AK",
onItem: d.getTestCallback(function(item){
writeStore.deleteItem(item);
t.is("AL", s11.value);
t.is(5, s11.getOptions().length);
})
});
return d;
},
// Test that new items added to the data store appear in the select's options
function test_newItem(t){
t.is(5, s11.getOptions().length);
t.is("AL", s11.value);
var d = new doh.Deferred();
writeStore.newItem({value: "NY", label: "New York"});
setTimeout(d.getTestCallback(function(){
t.is(6, s11.getOptions().length);
s11.set("value", s11.getOptions({ label: "New York" })); // set via label search
t.is("NY", s11.value);
}), 100);
return d;
},
// Test that a Select's store can be changed using deprecated API
// TODO remove in 2.0
function test_deprecatedSetStore(t){
t.is("AL", s12_dep.value);
s12_dep.setStore(store2, "FL");
t.is("FL", s12_dep.value);
s12_dep.setStore(readStore, "CA");
t.is("CA", s12_dep.value);
s12_dep.setStore(store2);
t.is("DE", s12_dep.value);
t.is(7, s12_dep.getOptions().length);
}
]);
doh.register("dojo/store", [
// Tests that when the currently selected item is changed in the data store,
// the change is reflected in the Select widget
function test_changeSelected(t){
// destroy second widget that shares same store to make sure Observable handles are cleaned up
ds11a.destroy();
t.is("AL", ds11.value);
t.t(/<span.*>Alabama<\/span>/i.test(ds11.containerNode.innerHTML));
ds11.set("value", "AK");
t.is("AK", ds11.value);
t.t(/<span.*>Alaska<\/span>/i.test(ds11.containerNode.innerHTML));
var item = memoryStore3.get("AK");
item.label = "North Pole";
memoryStore3.put(item);
t.t(/<span.*>North Pole<\/span>/i.test(ds11.containerNode.innerHTML), "select displayed value updated");
},
// Test that a delete of the non-selected item will remove that item from the Select's
// list of options.
function test_deleteNonSelected(t){
t.is(7, ds11.getOptions().length);
t.is("AK", ds11.value);
memoryStore3.remove("AZ");
t.is(6, ds11.getOptions().length);
},
// Test that a delete of the selected item will remove that item from the Select's
// list of options, and switch to a new selected item
function test_deleteSelected(t){
t.is(6, ds11.getOptions().length);
t.is("AK", ds11.value);
memoryStore3.remove("AK");
t.is("AL", ds11.value);
t.is(5, ds11.getOptions().length);
},
// Test that new items added to the data store appear in the select's options
function test_newItem(t){
t.is(5, ds11.getOptions().length);
t.is("AL", ds11.value);
memoryStore3.add({value: "NY", label: "New York"});
// TODO: try w/out the timeout
var d = new doh.Deferred();
setTimeout(d.getTestCallback(function(){
t.is(6, ds11.getOptions().length);
ds11.set("value", "NY");
t.is("NY", ds11.value);
}), 100);
return d;
},
// Test that a Select's store can be changed using set API
function test_setStore(t){
t.is(7, ds12.getOptions().length);
t.is("AL", ds12.value);
ds12.set("store", memoryStore2);
ds12.set("value", "FL")
t.is(7, ds12.getOptions().length);
t.is("FL", ds12.value);
ds12.set("store", memoryStore);
ds12.set("value", "CA")
t.is(7, ds12.getOptions().length);
// ensure that escaping prevented child nodes
t.is(ds12.containerNode.firstChild.childNodes.length, 1);
t.is("CA", ds12.value);
ds12.set("store", memoryStore2);
t.is(7, ds12.getOptions().length);
t.is("DE", ds12.value);
},
// Test that a Select's store can be changed using deprecated API
// TODO remove in 2.0
function test_deprecatedSetStore(t){
t.is(7, ds12_dep.getOptions().length);
t.is("AL", ds12_dep.value);
ds12_dep.setStore(memoryStore2, "FL");
t.is(7, ds12_dep.getOptions().length);
t.is("FL", ds12_dep.value);
ds12_dep.setStore(memoryStore, "CA");
t.is(7, ds12_dep.getOptions().length);
// ensure that escaping prevented child nodes
t.is(ds12_dep.containerNode.firstChild.childNodes.length, 1);
t.is("CA", ds12_dep.value);
ds12_dep.setStore(memoryStore2);
t.is(7, ds12_dep.getOptions().length);
t.is("DE", ds12_dep.value);
},
function test_setQuery(){
ds.set("value", "CT");
doh.is("Connecticut", ds.get("displayedValue"));
ds.set("query", {value: /^A.*/});
doh.is("Alabama", ds.get("displayedValue"));
}
]);
doh.register("validation", [
function required(){
var s3 = registry.byId("s3");
doh.is("Incomplete", s3.get("state"), "incomplete because required but no value");
var stateWatch = "no notification";
s3.watch("state", function(name, oval, nval){
stateWatch = nval;
});
s3.set("required", false);
doh.is("", stateWatch, "watch fired after set requried=true");
s3.set("required", true);
doh.is("Incomplete", stateWatch, "watch fired after set required=false''");
s3.set("value", "AK");
doh.is("", stateWatch, "watch fired after set value=AK''");
}
]);
}
if(testPerformance){
doh.register("performance", [
{
name: "test_performance_single",
testType: "perf",
trialDuration: 100,
trialIterations: 100,
trialDelay: 100,
runTest: function(t){
var opt = {value: "Test", label: "Test Option"};
s6.addOption(opt);
s6.removeOption(opt);
}
},
{
name: "test_performance_separate",
testType: "perf",
trialDuration: 100,
trialIterations: 100,
trialDelay: 100,
setUp: function(t){
var opts = (t.options = []);
for(var i = 0; i < addNum; i++){
opts.push({value: i + "", label: "Option " + (i + 1)});
}
},
runTest: function(t){
array.forEach(t.options, function(opt){
s6.addOption(opt);
});
array.forEach(t.options, function(opt){
s6.removeOption(opt);
});
},
tearDown: function(t){
delete t.options;
}
},
{
name: "test_performance_batch",
testType: "perf",
trialDuration: 100,
trialIterations: 100,
trialDelay: 100,
setUp: function(t){
var opts = (t.options = []);
for(var i = 0; i < addNum; i++){
opts.push({value: i + "", label: "Option " + (i + 1)});
}
},
runTest: function(t){
s6.addOption(t.options);
s6.removeOption(t.options);
},
tearDown: function(t){
delete t.options;
}
}
]);
}
if(test || testPerformance){
doh.run();
}
});
</script>
</head>
<body role="main">
<h1 class="testTitle">Test: dijit/form/Select</h1>
<p>
Note: load <a href="test_Select.html?mode=test">test_Select.html?mode=test</a> to run unit tests, or
<a href="test_Select.html?mode=benchmark">test_Select.html?mode=benchmark</a> to run performance tests.
</p>
<script type="dojo/require">
registry: "dijit/registry"
</script>
<form method="get" id="htmlForm" action="get">
<h2>HTML select for comparison</h2>
<label for="htmlSelect">Four options:</label>
<select id="htmlSelect" title="native title">
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
<option value="four">four</option>
</select>
<label for="htmlSelect2">Empty:</label>
<select id="htmlSelect2">
</select>
</form>
<form id="form" data-dojo-id="form" data-dojo-type="dijit/form/Form" method="get"
onSubmit="return this.validate();">
<h2>dijit/form/Select form</h2>
<h4 class="testSubtitle">Setting Defaults</h4>
<span id="ls1">Test One:</span>
<select id="s1" data-dojo-id="s1" data-dojo-type="dijit/form/Select" name="s1" aria-labelledby="ls1">
<option value="TN">Tennessee</option>
<option value="VA" selected="selected">Virginia</option>
<option value="WA">Washington</option>
<option value="FL">Florida</option>
<option value="CA">California</option>
</select>
<button id="s1button" data-dojo-type="dijit/form/Button" data-dojo-props='type:"button", onClick:function(){ console.log(s1.get("displayedValue")); }'>
Get Displayed Value
</button>
<span id="ls2">Test Two:</span>
<select id="s2" data-dojo-id="s2" data-dojo-type="dijit/form/Select" name="s2" aria-labelledby="ls2"
value="CA" title="widget title">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
</select>
<span id="ls3">Test Three (required):</span>
<select id="s3" data-dojo-id="s3" data-dojo-type="dijit/form/Select" name="s3" aria-labelledby="ls3"
data-dojo-props='style:{width:"150px"},
required:true,
onChange: function(){
if(!this.options[0].value){
this.removeOption(0);
}
}
'>
<option> </option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option></option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option></option>
<option value="CA">California</option>
</select>
<hr>
<h4 class="testSubtitle">Rich Text (Need to use divs and spans - since browsers hack selects to pieces)</h4>
<span id="ls4">Rich text One:</span>
<span id="s4" data-dojo-id="s4" data-dojo-type="dijit/form/Select" name="s4" aria-labelledby="ls4" value="AK">
<span data-dojo-value="AL"><b>Alabama</b></span>
<span data-dojo-value="AK"><span style="color:red;">A</span><span style="color:orange;">l</span><span style="color:yellow;">a</span><span style="color:green;">s</span><span style="color:blue;">k</span><span style="color:purple;">a</span></span>
<span data-dojo-value="AZ"><i>Arizona</i></span>
<span data-dojo-value="AR"><span class="ark">Arkansas</span></span>
<span data-dojo-value="CA"><span style="font-size:25%">C</span><span style="font-size:50%">a</span><span style="font-size:75%">l</span><span style="font-size:90%">i</span><span style="font-size:100%">f</span><span style="font-size:125%">o</span><span style="font-size:133%">r</span><span style="font-size:150%">n</span><span style="font-size:175%">i</span><span style="font-size:200%">a</span></span>
<button value="NM" disabled="disabled">New<br> Mexico</button>
</span>
<button data-dojo-type="dijit/form/Button" data-dojo-props='type:"button", onClick:function(){ s4.set("disabled", !s4.get("disabled")); }'>
Toggle Disabled
</button>
<span id="ls5">Rich text two:</span>
<span id="s5" data-dojo-id="s5" data-dojo-type="dijit/form/Select" name="s5" aria-labelledby="ls5" value="move">
<span data-dojo-value=100><img style="vertical-align: middle;margin-top: 1px;margin-bottom:1px;" src="../../../dijit/themes/tundra/images/dndCopy.png" alt="copy" /> Copy</span>
<span data-dojo-value=101><img style="vertical-align: middle;margin-top: 1px;margin-bottom:1px;" src="../../../dijit/themes/tundra/images/dndMove.png" alt="move" /> Move</span>
<span data-dojo-value=102><img style="vertical-align: middle;margin-top: 1px;margin-bottom:1px;" src="../../../dijit/themes/tundra/images/dndNoCopy.png" alt="no copy" /> No Copy</span>
<span data-dojo-value=103><img style="vertical-align: middle;margin-top: 1px;margin-bottom:1px;" src="../../../dijit/themes/tundra/images/dndNoMove.png" alt="no move" /> No Move</span>
<span data-dojo-value=104><img style="vertical-align: middle;margin-top: 1px;margin-bottom:1px;" src="../../../dijit/themes/tundra/images/dndNoMove.png" alt="very long menu" /> Very Long Menu Entry</span>
</span>
<hr>
<h4 class="testSubtitle" id="ls6">Initially Empty</h4>
<select id="s6" data-dojo-id="s6" data-dojo-type="dijit/form/Select" name="s6" aria-labelledby="ls6"
data-dojo-props='maxHeight:100'>
</select>
<button data-dojo-type="dijit/form/Button" data-dojo-props='type:"button", onClick:function(){ numOptions++; s6.addOption({value: numOptions + "", label: "Option " + numOptions}); }'>
Add Option
</button>
<button data-dojo-type="dijit/form/Button" data-dojo-props='type:"button", onClick:function(){ s6.removeOption(0); }'>
Remove Top Option
</button>
<button data-dojo-type="dijit/form/Button" data-dojo-props='type:"button", onClick:function(){ s6.set("disabled", !s6.get("disabled")); }'>
Toggle Disabled
</button>
<hr>
<h4 class="testSubtitle" id="ls7">Single Item</h4>
<select id="s7" data-dojo-id="s7" data-dojo-type="dijit/form/Select" name="s7" aria-labelledby="ls7">
<option value="NY">New York</option>
</select>
<hr>
<h4 class="testSubtitle">Long lists</h4>
<span id="ls8a">maxHeight=200:</span>
<select id="s8a" data-dojo-id="s8a" data-dojo-type="dijit/form/Select" name="s8" aria-labelledby="ls8"
data-dojo-props='maxHeight:200'>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">Dist of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
<span id="ls8b">no maxHeight:</span>
<select id="s8b" data-dojo-id="s8b" data-dojo-type="dijit/form/Select" name="s8b" aria-labelledby="ls8b">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">Dist of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
<hr>
<h4 class="testSubtitle">dojo/data store (legacy API) based</h4>
<span id="ls9">Example 1</span>
<select id="s9" data-dojo-id="s9" data-dojo-type="dijit/form/Select" name="s9" value="CT"
aria-labelledby="ls9" data-dojo-props='store:readStore'>
</select>
<span id="ls10">Example 2</span>
<select id="s10" data-dojo-id="s10" data-dojo-type="dijit/form/Select" name="s10" aria-labelledby="ls10"
data-dojo-props='store:readStore'>
</select>
<span id="ls11">Example 3</span>
<select id="s11" data-dojo-id="s11" data-dojo-type="dijit/form/Select" name="s11" aria-labelledby="ls11"
data-dojo-props='store:writeStore'>
</select>
<span id="ls12_dep">Example 4 Legacy</span>
<select id="s12_dep" data-dojo-id="s12_dep" data-dojo-type="dijit/form/Select" name="s12_dep"
aria-labelledby="ls12_dep" data-dojo-props='store:readStore'>
</select>
<hr>
<h4 class="testSubtitle">dojo/store based</h4>
<span id="lds9">Example 1</span>
<select id="ds9" data-dojo-id="ds" data-dojo-type="dijit/form/Select" name="ds9" aria-labelledby="lds9"
value="CT" data-dojo-props='store:memoryStore, labelAttr:"label"'>
</select>
<span id="lds10">Example 2</span>
<select id="ds10" data-dojo-id="ds10" data-dojo-type="dijit/form/Select" name="ds10" aria-labelledby="lds10"
data-dojo-props='store:memoryStore, labelAttr:"label"'>
</select>
<span id="lds11">Example 3 (Observable)</span>
<select id="ds11" data-dojo-id="ds11" data-dojo-type="dijit/form/Select" name="ds11" aria-labelledby="lds11"
data-dojo-props='store:memoryStore3, labelType: "text", labelAttr:"label"'>
</select>
<span id="lds11a">Example 3a (Observable, same store as 3)</span>
<select id="ds11a" data-dojo-id="ds11a" data-dojo-type="dijit/form/Select" name="ds11a" aria-labelledby="lds11a"
data-dojo-props='store:memoryStore3, labelAttr:"label"'>
</select>
<span id="lds12">Example 4</span>
<select id="ds12" data-dojo-id="ds12" data-dojo-type="dijit/form/Select" name="ds12" aria-labelledby="lds12"
data-dojo-props='labelType: "text", store:memoryStore, labelAttr:"label"'>
</select>
<span id="lds12_dep">Example 5 Legacy</span>
<select id="ds12_dep" data-dojo-id="ds12_dep" data-dojo-type="dijit/form/Select" name="ds12_dep"
aria-labelledby="lds12_dep"
data-dojo-props='labelType: "text", store:memoryStore, labelAttr:"label"'>
</select>
<hr>
<h4 class="testSubtitle">Inlined with text (all IE modes except for IE8 Standards)</h4>
<span id="ltxtPrompt">Text Prompt:</span>
<select id="txtPrompt" data-dojo-type="dijit/form/Select" aria-labelledby="ltxtPrompt">
<option value="SEL" selected="selected">Select</option>
<option value="OTHER">Other</option>
</select>
<hr>
<h4 class="testSubtitle">More required but blank selects</h4>
<span id="ls13">required s13:</span>
<select id="s13" data-dojo-id="s13" data-dojo-type="dijit/form/Select" name="s13" aria-labelledby="ls13"
style="width: 150px;" required="true">
<option> </option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option></option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option></option>
<option value="CA">California</option>
</select>
<span id="ls14">required s14:</span>
<select id="s14" data-dojo-id="s14" data-dojo-type="dijit/form/Select"
name="s14" aria-labelledby="ls14" style="width: 150px;" required="true">
<option> </option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option></option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option></option>
<option value="CA">California</option>
</select>
<hr>
<button data-dojo-type="dijit/form/Button" data-dojo-props='type:"button", onClick:function(){ console.dir(form.getValues()); }'>
Get Values
</button>
<button data-dojo-type="dijit/form/Button" data-dojo-props='id:"submit", type:"submit"'>Submit</button>
</form>
<h4 class="testSubtitle">Disabled</h4>
<span id="l_testDisabled">Disabled:</span>
<select id='testDisabled' data-dojo-id='testDisabled' data-dojo-type="dijit/form/Select"
disabled name="testDisabled" aria-labelledby="l_testDisabled">
<option value="foo">foo</option>
<option value="bar">bar</option>
</select>
<hr>
<h4 class="testSubtitle">Programmatic and other tests</h4>
<div id="testProgramatic"></div>
<!-- testing that tooltip disappears when dialog is closed -->
<div dojoType="dijit/Dialog" id="dlg1">
<div dojoType="dijit/form/Select" id="dlg1Select"required="true"></div>
<div dojoType="dijit/form/Button" id="dlg1ValidateBtn">
<script type=dojo/method data-dojo-event="onClick">
var dlg1 = registry.byId("dlg1");
if(dlg1.validate()){
dlg1.hide();
}
</script>
validate and close
</div>
</div>
<button dojoType="dijit/form/Button" id="dlg1OpenBtn"
onclick="registry.byId('dlg1').show();">show one select dialog</button>
<div dojoType="dijit/Dialog" id="dlg2">
<div dojoType="dijit/form/Select" id="dlg2Select1"required="true"></div>
<div dojoType="dijit/form/Select" id="dlg2Select2"required="true"></div>
<div dojoType="dijit/form/Button" id="dlg2ValidateBtn">
<script type=dojo/method data-dojo-event="onClick">
var dlg2 = registry.byId("dlg2");
if(dlg2.validate()){
dlg2.hide();
}
</script>
validate and close
</div>
</div>
<button dojoType="dijit/form/Button" id="dlg2OpenBtn"
onclick="registry.byId('dlg2').show();">show two select dialog</button>
<br>
<fieldset class="area">
<legend>Rendering tests</legend>
<fieldset class="area">
<legend>unstyled widget</legend>
<fieldset class="area">
<legend id="lr1">normal</legend>
<select aria-labelledby="lr1" id="r1" data-dojo-type="dijit/form/Select">
<option data-dojo-value="1">1</option>
<option data-dojo-value="2">2</option>
</select>
</fieldset>
<fieldset class="area">
<legend id="lr2">disabled</legend>
<select aria-labelledby="lr2" id="r2" data-dojo-type="dijit/form/Select" disabled>
<option data-dojo-value="1">1</option>
<option data-dojo-value="2">2</option>
</select>
</fieldset>
<fieldset class="area">
<legend id="lr3">error</legend>
<select id="r3" aria-labelledby="lr3" data-dojo-type="dijit/form/Select" class="dijitError dijitSelectError dijitValidationTextBoxError" data-dojo-props="required:true">
<option data-dojo-value=""></option>
<option data-dojo-value="2">2</option>
</select>
</fieldset>
<fieldset class="area">
<legend id="lr4">hover</legend>
<select id="r4" aria-labelledby="lr4" data-dojo-type="dijit/form/Select" class="dijitHover dijitSelectHover">
<option data-dojo-value="1">1</option>
<option data-dojo-value="2">2</option>
</select>
</fieldset>
<fieldset class="area">
<legend id="lr5">focused</legend>
<select id="r5" aria-labelledby="lr5" data-dojo-type="dijit/form/Select" class="dijitFocused dijitSelectFocused">
<option data-dojo-value="1">1</option>
<option data-dojo-value="2">2</option>
</select>
</fieldset>
<fieldset class="area">
<legend id="lr6">RTL</legend>
<select id="r6" aria-labelledby="lr6" data-dojo-type="dijit/form/Select" dir="rtl">
<option data-dojo-value="1">1</option>
<option data-dojo-value="2">2</option>
</select>
</fieldset>
<fieldset class="area">
<legend id="lr7">RTL error</legend>
<select id="r7" aria-labelledby="lr7" data-dojo-type="dijit/form/Select" class="dijitError dijitSelectError dijitValidationTextBoxError" dir="rtl" data-dojo-props="required:true">
<option data-dojo-value=""></option>
<option data-dojo-value="2">2</option>
</select>
</fieldset>
<fieldset class="area">
<legend id="lr8">styled option</legend>
<span id="r8" aria-labelledby="lr8" data-dojo-type="dijit/form/Select">
<span data-dojo-value="1"><span style="font-size:200%;color:pink;">Large</span></span>
<span data-dojo-value="2">2</span>
</span>
</fieldset>
</fieldset>
<br>
<fieldset class="area">
<legend>width:60px;font-family:Arial;font-size:150%;border:2px blue;padding:5px;color:red</legend>
<fieldset class="area customStyled">
<legend id="lcs1">normal</legend>
<select id="cs1" aria-labelledby="lcs1" data-dojo-type="dijit/form/Select" style="color:red;width:60px;">
<option data-dojo-value="1">1</option>
<option data-dojo-value="2">2</option>
</select>
</fieldset>
<fieldset class="area customStyled">
<legend id="lcs2">disabled</legend>
<select id="cs2" aria-labelledby="lcs2" data-dojo-type="dijit/form/Select" style="color:red;width:60px;" disabled>
<option data-dojo-value="1">1</option>
<option data-dojo-value="2">2</option>
</select>
</fieldset>
<fieldset class="area customStyled">
<legend id="lcs3">error</legend>
<select id="cs3" aria-labelledby="lcs3" data-dojo-type="dijit/form/Select" class="dijitError dijitSelectError dijitValidationTextBoxError" style="color:red;width:60px;" data-dojo-props="required:true">
<option data-dojo-value=""></option>
<option data-dojo-value="2">2</option>
</select>
</fieldset>
<fieldset class="area customStyled">
<legend id="lcs4">hover</legend>
<select id="cs4" aria-labelledby="lcs4" data-dojo-type="dijit/form/Select" class="dijitHover dijitSelectHover" style="color:red;width:60px;">
<option data-dojo-value="1">1</option>
<option data-dojo-value="2">2</option>
</select>
</fieldset>
<fieldset class="area customStyled">
<legend id="lcs5">focused</legend>
<select id="cs5" data-dojo-type="dijit/form/Select" aria-labelledby="lcs5" class="dijitFocused dijitSelectFocused" style="color:red;width:60px;">
<option data-dojo-value="1">1</option>
<option data-dojo-value="2">2</option>
</select>
</fieldset>
<fieldset class="area customStyled">
<legend id="lcs6">RTL</legend>
<select id="cs6" aria-labelledby="lcs6" data-dojo-type="dijit/form/Select" dir="rtl" style="color:red;width:60px;">
<option data-dojo-value="1">1</option>
<option data-dojo-value="2">2</option>
</select>
</fieldset>
<fieldset class="area customStyled">
<legend id="lcs7">RTL error</legend>
<select id="cs7" aria-labelledby="lcs7" data-dojo-type="dijit/form/Select" class="dijitError dijitSelectError dijitValidationTextBoxError" style="color:red;width:60px;" dir="rtl" data-dojo-props="required:true">
<option data-dojo-value=""></option>
<option data-dojo-value="2">2</option>
</select>
</fieldset>
<fieldset class="area customStyled">
<legend id="lcs8">styled option</legend>
<span id="cs8" aria-labelledby="lcs8" data-dojo-type="dijit/form/Select" style="color:red;width:120px;">
<span data-dojo-value="1"><span style="font-size:200%;color:pink;">Large</span></span>
<span data-dojo-value="2">2</span>
</span>
</fieldset>
</fieldset>
<br>
<fieldset class="area dj_a11y">
<legend>a11y, unstyled</legend>
<fieldset class="area">
<legend id="la1">normal</legend>
<select id="a1" aria-labelledby="la1" data-dojo-type="dijit/form/Select">
<option data-dojo-value="1">1</option>
<option data-dojo-value="2">2</option>
</select>
</fieldset>
<fieldset class="area">
<legend id="la2">disabled</legend>
<select id="a2" aria-labelledby="la2" data-dojo-type="dijit/form/Select" disabled>
<option data-dojo-value="1">1</option>
<option data-dojo-value="2">2</option>
</select>
</fieldset>
<fieldset class="area">
<legend id="la3">error</legend>
<select id="a3" aria-labelledby="la3" data-dojo-type="dijit/form/Select" class="dijitError dijitSelectError dijitValidationTextBoxError" data-dojo-props="required:true">
<option data-dojo-value=""></option>
<option data-dojo-value="2">2</option>
</select>
</fieldset>
<fieldset class="area">
<legend id="la4">hover</legend>
<select id="a4" aria-labelledby="la4" data-dojo-type="dijit/form/Select" class="dijitHover dijitSelectHover">
<option data-dojo-value="1">1</option>
<option data-dojo-value="2">2</option>
</select>
</fieldset>
<fieldset class="area">
<legend id="la5">focused</legend>
<select id="a5" aria-labelledby="la5" data-dojo-type="dijit/form/Select" class="dijitFocused dijitSelectFocused">
<option data-dojo-value="1">1</option>
<option data-dojo-value="2">2</option>
</select>
</fieldset>
<fieldset class="area">
<legend id="la6">RTL</legend>
<select id="a6" aria-labelledby="la6" data-dojo-type="dijit/form/Select" dir="rtl">
<option data-dojo-value="1">1</option>
<option data-dojo-value="2">2</option>
</select>
</fieldset>
<fieldset class="area">
<legend id="la7">RTL error</legend>
<select id="a7" aria-labelledby="la7" data-dojo-type="dijit/form/Select" class="dijitError dijitSelectError dijitValidationTextBoxError" dir="rtl" data-dojo-props="required:true">
<option data-dojo-value=""></option>
<option data-dojo-value="2">2</option>
</select>
</fieldset>
<fieldset class="area">
<legend id="la8">styled option</legend>
<span id="a8" aria-labelledby="la8" data-dojo-type="dijit/form/Select">
<span data-dojo-value="1"><span style="font-size:200%;color:pink;">Large</span></span>
<span data-dojo-value="2">2</span>
</span>
</fieldset>
</fieldset>
<br>
<fieldset class="area dj_a11y">
<legend>a11y styled</legend>
<fieldset class="area customStyled">
<legend id="lacs1">normal</legend>
<select id="acs1" aria-labelledby="lacs1" data-dojo-type="dijit/form/Select" style="color:red;width:60px;">
<option data-dojo-value="1">1</option>
<option data-dojo-value="2">2</option>
</select>
</fieldset>
<fieldset class="area customStyled">
<legend id="lacs2">disabled</legend>
<select id="acs2" aria-labelledby="lacs2" data-dojo-type="dijit/form/Select" style="color:red;width:60px;" disabled>
<option data-dojo-value="1">1</option>
<option data-dojo-value="2">2</option>
</select>
</fieldset>
<fieldset class="area customStyled">
<legend id="lacs3">error</legend>
<select id="acs3" aria-labelledby="lacs3" data-dojo-type="dijit/form/Select" class="dijitError dijitSelectError dijitValidationTextBoxError" style="color:red;width:60px;" data-dojo-props="required:true">
<option data-dojo-value=""></option>
<option data-dojo-value="2">2</option>
</select>
</fieldset>
<fieldset class="area customStyled">
<legend id="lacs4">hover</legend>
<select id="acs4" aria-labelledby="lacs5" data-dojo-type="dijit/form/Select" class="dijitHover dijitSelectHover" style="color:red;width:60px;">
<option data-dojo-value="1">1</option>
<option data-dojo-value="2">2</option>
</select>
</fieldset>
<fieldset class="area customStyled">
<legend id="lacs5">focused</legend>
<select id="acs5" aria-labelledby="lacs5" data-dojo-type="dijit/form/Select" class="dijitFocused dijitSelectFocused" style="color:red;width:60px;">
<option data-dojo-value="1">1</option>
<option data-dojo-value="2">2</option>
</select>
</fieldset>
<fieldset class="area customStyled">
<legend id="lacs6">RTL</legend>
<select id="acs6" aria-labelledby="lacs6" data-dojo-type="dijit/form/Select" dir="rtl" style="color:red;width:60px;">
<option data-dojo-value="1">1</option>
<option data-dojo-value="2">2</option>
</select>
</fieldset>
<fieldset class="area customStyled">
<legend id="lacs7">RTL error</legend>
<select id="acs7" aria-labelledby="lacs7" data-dojo-type="dijit/form/Select" class="dijitError dijitSelectError dijitValidationTextBoxError" style="color:red;width:60px;" dir="rtl" data-dojo-props="required:true">
<option data-dojo-value=""></option>
<option data-dojo-value="2">2</option>
</select>
</fieldset>
<fieldset class="area customStyled">
<legend id="lacs8">styled option</legend>
<span id="acs8" aria-labelledby="lacs8" data-dojo-type="dijit/form/Select" style="color:red;width:120px;">
<span data-dojo-value="1"><span style="font-size:200%;color:pink;">Large</span></span>
<span data-dojo-value="2">2</span>
</span>
</fieldset>
</fieldset>
</fieldset>
<h4 class="testSubtitle">Toolbar</h4>
<input id="beforeToolbar">
<div data-dojo-type="dijit/Toolbar">
<button type="button" data-dojo-type="dijit/form/ToggleButton" id="toggle1">
toggle 1
</button>
<select id="toolbarSelect" data-dojo-id="s14" data-dojo-type="dijit/form/Select"
name="s14" style="width: 150px;" required="true">
<option> </option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option></option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option></option>
<option value="CA">California</option>
</select>
<button type="button" data-dojo-type="dijit/form/ToggleButton" id="toggle2">
toggle 2
</button>
</div>
</body>
</html>