gecko/mobile/chrome/tests/browser_select.html

85 lines
2.8 KiB
HTML

<html>
<title>Browser Blank Page 01</title>
<body>
<!-- simple combobox with an onchange handler -->
<select id="combobox" size="1" onchange="document.getElementById('combobox-value').innerHTML = '(' + this.selectedIndex + ') [' + this.value + ']';">
<option>One</option>
<option>Two</option>
<option selected="true">Three</option>
<option>Four</option>
<option>Five</option>
<option>Six</option>
<option>Seven</option>
<option>Eight</option>
<option>Nine</option>
<option>Ten</option>
</select>
<br>
<span>onchange: (selectedIndex) [value]</span>
<br>
<span id="combobox-value">-</span>
<br>
<button onclick="addToCombo(document.getElementById('combo1'));">Add Option</button>
<button onclick="removeFirstFromCombo(document.getElementById('combo1'));">Remove First Option</button>
<button onclick="unselectCombo(document.getElementById('combo1'));">Unselect</button>
<br>
<br>
<!-- simple listbox with an onchange handler -->
<select id="listbox" size="5" onchange="document.getElementById('listbox-value').innerHTML = '(' + this.selectedIndex + ') [' + this.value + ']';">
<option>Alpha</option>
<option>Beta</option>
<option>Gamma</option>
<option>Epsilon</option>
<option>It's all Greek!</option>
</select>
<br>
<span>onchange: (selectedIndex) [value]</span>
<br>
<span id="listbox-value">-</span>
<br>
<br>
<!-- disabled combobox -->
<select id="combo-disabled" size="1" disabled="true">
<option>One</option>
<option>Two</option>
<option selected="true">Three</option>
<option>Four</option>
<option>Five</option>
</select>
<br>
<br>
<!-- Option grouped combobox -->
<div>OptGroup Combobox:</div>
<select id="combobox-optiongroup" size="1">
<optgroup label="Numbers">
<option>One</option>
<option>Two</option>
<option selected="true">Three</option>
<option>Four</option>
<option>Five</option>
</optgroup>
<optgroup label="Letters">
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</optgroup>
</select>
<br>
<br>
<!-- Multi-select listbox -->
<select id="listbox-multiselect" size="5" multiple="true">
<option>Alpha</option>
<option>Beta</option>
<option>Gamma</option>
<option>Epsilon</option>
<option>One</option>
<option>Two</option>
<option>Three</option>
<option>Four</option>
</select>
<br>
<button onclick="unselectCombo(document.getElementById('listbox-multiselect'));">Unselect</button>
</body>
</html>