| <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> |
