738 lines
28 KiB
HTML
738 lines
28 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
|
<title>dijit.form.Select test</title>
|
|
|
|
<style>
|
|
@import url(../../themes/claro/document.css);
|
|
@import url(../../themes/claro/claro.css);
|
|
@import url(../css/dijitTests.css);
|
|
.ark { text-decoration: underline; }
|
|
form {
|
|
margin: 10px 0px;
|
|
border: solid gray 2px;
|
|
}
|
|
</style>
|
|
|
|
<!-- required: the default dijit theme: -->
|
|
<link id="themeStyles" rel="stylesheet" href="../../../dijit/themes/claro/claro.css"/>
|
|
|
|
<!-- required: dojo.js -->
|
|
<script type="text/javascript" src="../../../dojo/dojo.js"
|
|
data-dojo-config="isDebug: true, parseOnLoad: true"></script>
|
|
|
|
<!-- only needed for alternate theme testing: -->
|
|
<script type="text/javascript" src="../_testCommon.js"></script>
|
|
|
|
<script type="text/javascript" src="../helpers.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
dojo.require("doh.runner");
|
|
dojo.require("dojo.parser");
|
|
dojo.require("dijit.form.Select");
|
|
dojo.require("dijit.form.Button");
|
|
dojo.require("dijit.form.Form");
|
|
dojo.require("dojo.data.ItemFileWriteStore");
|
|
dojo.require("dijit.Dialog");
|
|
|
|
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);
|
|
|
|
// Data and stores here for store-based selects
|
|
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"}
|
|
]
|
|
};
|
|
|
|
var readStore = new dojo.data.ItemFileReadStore({data:dojo.clone(data)});
|
|
var store2 = new dojo.data.ItemFileReadStore({data:dojo.clone(data2)});
|
|
var writeStore = new dojo.data.ItemFileWriteStore({data:dojo.clone(data)});
|
|
|
|
function wrapLabel(expected){
|
|
return ("<span class=\"dijitReset dijitInline dijitSelectLabel\">" + expected + "</span>").toLowerCase().replace(/ */g, "");
|
|
}
|
|
|
|
dojo.ready(function(){
|
|
dojo.connect(s1, "onChange", function(val){
|
|
console.log("First Select Changed to " + val);
|
|
numChanges++;
|
|
});
|
|
|
|
var programmatic = new dijit.form.Select({
|
|
options: [
|
|
{ label: 'foo', value: 'foo', selected: true },
|
|
{ label: 'bar', value: 'bar' }
|
|
]
|
|
});
|
|
programmatic.placeAt('testProgramatic');
|
|
|
|
var programmaticDisabled = new dijit.form.Select({
|
|
disabled: true,
|
|
options: [
|
|
{ label: 'foo', value: 'foo', selected: true },
|
|
{ label: 'bar', value: 'bar' }
|
|
]
|
|
});
|
|
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", "WA"); // set s1 to a valid value
|
|
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_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);
|
|
}
|
|
},
|
|
|
|
// Test that destroying a Select destroys the internal Menu and MenuItems too
|
|
{
|
|
name: "test_destroy",
|
|
timeout: 5000,
|
|
runTest: function(t){
|
|
var oldCnt = dijit.registry.length;
|
|
|
|
s1.destroy();
|
|
|
|
var newCnt = dijit.registry.length;
|
|
t.t(newCnt < oldCnt + 3, "should have destroyed many widgets, went from " + oldCnt + " to " + newCnt);
|
|
}
|
|
}
|
|
]);
|
|
|
|
doh.register("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.is(wrapLabel("Alabama"), s11.containerNode.innerHTML.toLowerCase().replace(/ */g, ""));
|
|
s11.set("value", "AK");
|
|
t.is("AK", s11.value);
|
|
t.is(wrapLabel("Alaska"), s11.containerNode.innerHTML.toLowerCase().replace(/ */g, ""));
|
|
var d = new doh.Deferred();
|
|
writeStore.fetchItemByIdentity({
|
|
identity: "AK",
|
|
onItem: d.getTestCallback(function(item){
|
|
writeStore.setValue(item, "label", "North Pole");
|
|
t.is(wrapLabel("North Pole"), s11.containerNode.innerHTML.toLowerCase().replace(/ */g, ""), "select displayed value updated");
|
|
})
|
|
});
|
|
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", "NY");
|
|
t.is("NY", s11.value);
|
|
}), 100);
|
|
|
|
return d;
|
|
},
|
|
|
|
// Test that a Select's store can be changed
|
|
// TODO: should be supported/tested through set("store", ...), although
|
|
// I guess that wouldn't allow setting the selected item at the same time.
|
|
function test_setStore(t){
|
|
t.is("AL", s12.value);
|
|
s12.setStore(store2, "FL");
|
|
t.is("FL", s12.value);
|
|
s12.setStore(readStore, "CA");
|
|
t.is("CA", s12.value);
|
|
s12.setStore(store2);
|
|
t.is("DE", s12.value);
|
|
t.is(7, s12.getOptions().length);
|
|
}
|
|
]);
|
|
|
|
doh.register("validation", [
|
|
function required(){
|
|
var s3 = dijit.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''");
|
|
}
|
|
]);
|
|
doh.register("validation in dialog1", [
|
|
function showDialog(){
|
|
// Show dialog, returning Deferred that fires when show dialog is finished.
|
|
// Before showing, focus the open button, so that Dialog knows where to return focus to.
|
|
dijit.byId("dlg1OpenBtn").focus();
|
|
return dijit.byId("dlg1").show();
|
|
},
|
|
function validateDialog(){
|
|
// Clicking validate button should show "required but empty" tooltip on the Select
|
|
var d = new doh.Deferred();
|
|
dijit.byId("dlg1ValidateBtn").focus();
|
|
dijit.byId("dlg1").validate();
|
|
setTimeout(d.getTestCallback(function(){
|
|
doh.is("dlg1Select", dijit._curFocus && dijit._curFocus.id, "focused on select");
|
|
masterTT = dojo.global.dijit._masterTT;
|
|
doh.t(masterTT && isVisible(masterTT.domNode), "tooltip shown");
|
|
}), 300);
|
|
return d;
|
|
},
|
|
function hideDialog(){
|
|
// Hiding the dialog should make the validation tooltip disappear
|
|
var d = new doh.Deferred();
|
|
dijit.byId("dlg1").hide().then(function(){
|
|
setTimeout(d.getTestCallback(function(){
|
|
doh.t(isHidden(masterTT.domNode), "tooltip hidden");
|
|
}), 300);
|
|
});
|
|
return d;
|
|
},
|
|
function showDialogAgain(){
|
|
// Show dialog, returning Deferred that fires when show dialog is finished.
|
|
// Before showing, focus the open button, so that Dialog knows where to return focus to.
|
|
dijit.byId("dlg1OpenBtn").focus();
|
|
return dijit.byId("dlg1").show();
|
|
},
|
|
function tooltipAppears(){
|
|
// Opening the dialog focuses the select, which is invalid since it's got no value.
|
|
// Since this is the second time it's being focused, it should popup the tooltip
|
|
// immediately.
|
|
var d = new doh.Deferred();
|
|
dijit.byId("dlg1ValidateBtn").focus();
|
|
dijit.byId("dlg1").validate();
|
|
setTimeout(d.getTestCallback(function(){
|
|
doh.is("dlg1Select", dijit._curFocus && dijit._curFocus.id, "focused on select");
|
|
masterTT = dojo.global.dijit._masterTT;
|
|
doh.t(masterTT && isVisible(masterTT.domNode), "tooltip shown");
|
|
}), 300);
|
|
return d;
|
|
},
|
|
function tearDown(){
|
|
return dijit.byId("dlg1").hide();
|
|
}
|
|
]);
|
|
|
|
doh.register("validation in dialog2", [
|
|
function showDialog(){
|
|
// Show dialog, returning Deferred that fires when show dialog is finished.
|
|
// Before showing, focus the open button, so that Dialog knows where to return focus to.
|
|
dijit.byId("dlg2OpenBtn").focus();
|
|
return dijit.byId("dlg2").show();
|
|
},
|
|
function validateDialog(){
|
|
// Clicking validate button should show "required but empty" tooltip on the Select
|
|
var d = new doh.Deferred();
|
|
dijit.byId("dlg2ValidateBtn").focus();
|
|
dijit.byId("dlg2").validate();
|
|
setTimeout(d.getTestCallback(function(){
|
|
doh.is("dlg2Select1", dijit._curFocus && dijit._curFocus.id, "focused on select");
|
|
masterTT = dojo.global.dijit._masterTT;
|
|
doh.t(masterTT && isVisible(masterTT.domNode), "tooltip shown");
|
|
}), 300);
|
|
return d;
|
|
},
|
|
function hideDialog(){
|
|
// Hiding the dialog should make the validation tooltip disappear
|
|
var d = new doh.Deferred();
|
|
dijit.byId("dlg2").hide().then(function(){
|
|
setTimeout(d.getTestCallback(function(){
|
|
doh.t(isHidden(masterTT.domNode), "tooltip hidden");
|
|
}), 300);
|
|
});
|
|
return d;
|
|
}
|
|
]);
|
|
}
|
|
|
|
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){
|
|
dojo.forEach(t.options, function(opt){
|
|
s6.addOption(opt);
|
|
});
|
|
dojo.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 class="claro">
|
|
<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>
|
|
|
|
<form method="get" id="htmlForm" action="get">
|
|
<h2>HTML select for comparison</h2>
|
|
<label for="htmlSelect">Four options:</label>
|
|
<select id="htmlSelect">
|
|
<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>
|
|
<label for="s1">Test One: </label>
|
|
<select id="s1" data-dojo-id="s1" data-dojo-type="dijit.form.Select" data-dojo-props='name:"s1" '>
|
|
<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>
|
|
<label for="s2">Test Two: </label>
|
|
<select id="s2" data-dojo-id="s2" data-dojo-type="dijit.form.Select" data-dojo-props='name:"s2", value:"CA" '>
|
|
<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>
|
|
</select>
|
|
<label for="s3">Test Three (required): </label>
|
|
<select id="s3" data-dojo-id="s3" data-dojo-type="dijit.form.Select" data-dojo-props='name:"s3", 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>
|
|
<label>Rich text One:
|
|
<span id="s4" data-dojo-id="s4" data-dojo-type="dijit.form.Select" data-dojo-props='name:"s4", 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></label>
|
|
<button data-dojo-type="dijit.form.Button" data-dojo-props='type:"button", onClick:function(){ s4.set("disabled", !s4.get("disabled")); }'>
|
|
Toggle Disabled
|
|
</button>
|
|
<label>Rich text two:
|
|
<span id="s5" data-dojo-id="s5" data-dojo-type="dijit.form.Select" data-dojo-props='name:"s5", value:"move" '>
|
|
<span data-dojo-value="copy"><img style="vertical-align: middle;margin-top: 1px;margin-bottom:1px;" src="../../../dijit/themes/tundra/images/dndCopy.png" /> Copy</span>
|
|
<span data-dojo-value="move"><img style="vertical-align: middle;margin-top: 1px;margin-bottom:1px;" src="../../../dijit/themes/tundra/images/dndMove.png" /> Move</span>
|
|
<span data-dojo-value="nocopy"><img style="vertical-align: middle;margin-top: 1px;margin-bottom:1px;" src="../../../dijit/themes/tundra/images/dndNoCopy.png" /> No Copy</span>
|
|
<span data-dojo-value="nomove"><img style="vertical-align: middle;margin-top: 1px;margin-bottom:1px;" src="../../../dijit/themes/tundra/images/dndNoMove.png" /> No Move</span>
|
|
<span data-dojo-value="long"><img style="vertical-align: middle;margin-top: 1px;margin-bottom:1px;" src="../../../dijit/themes/tundra/images/dndNoMove.png" /> Very Long Menu Entry</span>
|
|
</span></label>
|
|
<hr>
|
|
<h4 class="testSubtitle"><label for="s6">Initially Empty</label></h4>
|
|
<select id="s6" data-dojo-id="s6" data-dojo-type="dijit.form.Select" data-dojo-props='name:"s6", 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"><label for="s7">Single Item</label></h4>
|
|
<select id="s7" data-dojo-id="s7" data-dojo-type="dijit.form.Select" data-dojo-props='name:"s7" '>
|
|
<option value="NY">New York</option>
|
|
</select>
|
|
<hr>
|
|
<h4 class="testSubtitle">Long lists</h4>
|
|
<label for="s8a">maxHeight=200:</label>
|
|
<select id="s8a" data-dojo-id="s8a" data-dojo-type="dijit.form.Select" data-dojo-props='name:"s8a", 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>
|
|
<label for="s8b">no maxHeight:</label>
|
|
<select id="s8b" data-dojo-id="s8b" data-dojo-type="dijit.form.Select" data-dojo-props='name:"s8b" '>
|
|
<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">Store-based</h4>
|
|
<label for="s9">Example 1</label>
|
|
<select id="s9" data-dojo-id="s9" data-dojo-type="dijit.form.Select" data-dojo-props='name:"s9", store:readStore, value:"CT" '>
|
|
</select>
|
|
<label for="s10">Example 2</label>
|
|
<select id="s10" data-dojo-id="s10" data-dojo-type="dijit.form.Select" data-dojo-props='name:"s10", store:readStore '>
|
|
</select>
|
|
<label for="s11">Example 3</label>
|
|
<select id="s11" data-dojo-id="s11" data-dojo-type="dijit.form.Select" data-dojo-props='name:"s11", store:writeStore '>
|
|
</select>
|
|
<label for="s12">Example 4</label>
|
|
<select id="s12" data-dojo-id="s12" data-dojo-type="dijit.form.Select" data-dojo-props='name:"s12", store:readStore '>
|
|
</select>
|
|
<hr>
|
|
<h4 class="testSubtitle">Inlined with text (all IE modes except for IE8 Standards)</h4>
|
|
<label for="txtPrompt">Text Prompt:</label>
|
|
<select id="txtPrompt" data-dojo-type="dijit.form.Select" >
|
|
<option value="SEL" selected="selected">Select</option>
|
|
<option value="OTHER">Other</option>
|
|
</select>
|
|
|
|
<hr>
|
|
<h4 class="testSubtitle">More required but blank selects</h4>
|
|
<label for="s13">required s13:</label>
|
|
<select id="s13" data-dojo-id="s13" data-dojo-type="dijit.form.Select"
|
|
name="s13" 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>
|
|
<label for="s14">required s14:</label>
|
|
<select id="s14" 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>
|
|
|
|
<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>
|
|
<label for="testDisabled">Disabled:</label>
|
|
<select id='testDisabled' data-dojo-id='testDisabled' data-dojo-type="dijit.form.Select" data-dojo-props='disabled:true, name:"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 event="onClick">
|
|
var dlg1 = dijit.byId("dlg1");
|
|
if(dlg1.validate()){
|
|
dlg1.hide();
|
|
}
|
|
</script>
|
|
validate and close
|
|
</div>
|
|
</div>
|
|
<button dojoType="dijit.form.Button" id="dlg1OpenBtn"
|
|
onclick="dijit.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 event="onClick">
|
|
var dlg2 = dijit.byId("dlg2");
|
|
if(dlg2.validate()){
|
|
dlg2.hide();
|
|
}
|
|
</script>
|
|
validate and close
|
|
</div>
|
|
</div>
|
|
<button dojoType="dijit.form.Button" id="dlg2OpenBtn"
|
|
onclick="dijit.byId('dlg2').show();">show two select dialog</button>
|
|
</body>
|
|
</html>
|