LayoutTests/fast/forms/select-initial-position.html

<html>

<body>
initial selected:<br>
<select name="component" size="4">
    <option>opt</option>
    <option>opt</option>
    <option>opt</option>
    <option>opt</option>
    <option>opt</option>
    <option>opt</option>
    <option>opt</option>
    <option>opt</option>
    <option>opt</option>
    <option>opt</option>
    <option selected=selected>this should be selected</option>
    <option>opt</option>
    <option>opt</option>
    <option>opt</option>
</select><br>
dynamic selected change:<br>
<select size="4">
    <option>opt</option>
    <option>opt</option>
    <option>opt</option>
    <option>opt</option>
    <option>opt</option>
    <option>opt</option>
    <option>opt</option>
    <option>opt</option>
    <option>opt</option>
    <option>opt</option>
    <option id='x'>this should be selected</option>
    <option>opt</option>
    <option>opt</option>
    <option>opt</option>
</select>
<script>
document.getElementById('x').selected = 'selected';
</script><br>
dynamic insert of selected option:<br>
<script>
var sel = document.createElement('select');
sel.setAttribute('size','4');
document.body.appendChild(sel);
var opt = document.createElement('option')
opt.innerHTML = 'opt';
sel.appendChild(opt);
opt = document.createElement('option')
opt.innerHTML = 'opt';
sel.appendChild(opt);
opt = document.createElement('option')
opt.innerHTML = 'opt';
sel.appendChild(opt);
opt = document.createElement('option')
opt.innerHTML = 'opt';
sel.appendChild(opt);
opt = document.createElement('option')
opt.innerHTML = 'opt';
sel.appendChild(opt);
opt = document.createElement('option')
opt.innerHTML = 'opt';
sel.appendChild(opt);
opt = document.createElement('option')
opt.innerHTML = 'this should be selected';
opt.selected = 'selected';
sel.appendChild(opt);
opt = document.createElement('option')
opt.innerHTML = 'opt';
sel.appendChild(opt);
</script><br>
initial selected:<br>
<select name="component" size="1">
    <option>opt</option>
    <option>opt</option>
    <option>opt</option>
    <option>opt</option>
    <option>opt</option>
    <option>opt</option>
    <option>opt</option>
    <option>opt</option>
    <option>opt</option>
    <option>opt</option>
    <option selected=selected>this should be selected</option>
    <option>opt</option>
    <option>opt</option>
    <option>opt</option>
</select><br>
dynamic selected change:<br>
<select size="1">
    <option>opt</option>
    <option>opt</option>
    <option>opt</option>
    <option>opt</option>
    <option>opt</option>
    <option>opt</option>
    <option>opt</option>
    <option>opt</option>
    <option>opt</option>
    <option>opt</option>
    <option id='xx'>this should be selected</option>
    <option>opt</option>
    <option>opt</option>
    <option>opt</option>
</select>
<script>
document.getElementById('xx').selected = 'selected';
</script><br>
dynamic insert of selected option:<br>
<script>
var sel = document.createElement('select');
sel.setAttribute('size','1');
document.body.appendChild(sel);
var opt = document.createElement('option')
opt.innerHTML = 'opt';
sel.appendChild(opt);
opt = document.createElement('option')
opt.innerHTML = 'opt';
sel.appendChild(opt);
opt = document.createElement('option')
opt.innerHTML = 'opt';
sel.appendChild(opt);
opt = document.createElement('option')
opt.innerHTML = 'opt';
sel.appendChild(opt);
opt = document.createElement('option')
opt.innerHTML = 'opt';
sel.appendChild(opt);
opt = document.createElement('option')
opt.innerHTML = 'opt';
sel.appendChild(opt);
opt = document.createElement('option')
opt.innerHTML = 'this should be selected';
opt.selected = 'selected';
sel.appendChild(opt);
opt = document.createElement('option')
opt.innerHTML = 'opt';
sel.appendChild(opt);
</script>

</body>

</html>