How do I show the selected item in an HTML <select> at the top
I have an HTML select that looks something like this (values are fake)
<select size="40">
<option value="1">What would you do if I sang out of tune,</option>
<option value="2">Would you stand up and walk out on me?</option>
... more
<option value="156">Lend me your ears, and I'll sing you a song,</option>开发者_高级运维;
<option selected="selected" value="157">I will try not to sing out of key.</option>
<option value="158">Oh, I get by with a little help from my friends.</option>
... more
<option value="507">I get high with a little help from my friends.</option>
<option value="509">Gonna' try with a little from my friends.</option>
</select>
The problem that I have is that when displaying the list after loading the page and the selected option is in the middle of the very long list, IE scrolls the selected option to the top of the list (which is what I want). Firefox, Chrome, Opera, and Safari show it at the bottom (which I don't want). I have to assume that IE is doing it wrong since everyone else shows it at the bottom.
How can I force the browsers to display the selected item at the top of the list. I do not want to put it at the top of the list, I just want it to scroll such that the selected option is at the top.
bonus, it would be even better if I can put it fourth from the top, but I can live without that if it's too difficult.
<html>
<head>
</head>
<body>
<script type="text/javascript">
window.onload = function () {
scroll_selected('test');
};
function scroll_selected ( form ) {
var form = ( typeof form == 'string' ) ?
document.getElementById(form) : form;
var selects = form.getElementsByTagName('select');
OUTER: for ( var i = 0; i < selects.length; i ++ ) {
var opts = selects.item(i).getElementsByTagName('option');
for ( var j = opts.length -1; j > 0; --j ) {
if ( opts.item(j).selected == true ) {
selects.item(i).scrollTop = j * opts.item(j).offsetHeight;
opts.item(j).selected = true;
continue OUTER;
}
}
}
}
</script>
<form id="test">
<select multiple size="3">
<option name="one" value="1">one</option>
<option name="two" value="2">two</option>
<option name="three" value="3" >three</option>
<option name="four" value="4">four</option>
<option name="five" value="5">five</option>
<option name="six" value="6" selected>six</option>
</select>
<select multiple size="3">
<option name="one" value="1">one</option>
<option name="two" value="2">two</option>
<option name="three" value="3">three</option>
<option name="four" value="4" selected>four</option>
<option name="five" value="5">five</option>
<option name="six" value="6">six</option>
</select>
<br />
<input type="submit" />
</form>
</body>
</html>
You can't do this. The behavior is defined by the browser (or maybe the OS in IE's case) and cannot be changed with code. Why you would need this is beyond my understanding.
I would suggest making your own "select" object that behaves the way you want. You can use a hidden div and JavaScript's onClick event handler to mimic a normal select. Then you can make it behave any way you want.
Never say never. I'm facing exactly the same problem. I have a couple of partial answers -- surely with the combined wisdom of everyone here they can be improved.
- For a select box 10 items high, you can select the item 10 below the one you want to appear at the top. Maybe you could use CSS to make it look like one you really want is selected.
- Scroll the select down to the bottom (by selecting the last option) and then back up to the one you really want. At least on Firefox, the select box seems to work by scrolling until the selected option is in view and then stopping.
Here's my jQuery code for the second option:
select.val(select.find('option:last').val());
select.val(selectedValue);
This nearly works. It works if I step over the lines above in Firebug's debugger, but not if I just let the code run normally.
Any thoughts?
How about taking the HTML for that setting it to a variable. Then remove(); it....then prepend() the contents of the saved variable? Too much?
function showlist($row)
{
global $activiteiten;
$sel='<select multiple="multiple" size="4" name="act_'.$row[0].'[]">';
foreach($activiteiten as $act)
{
$selected='';
if($row['activiteit']==$act['activiteit']) {
$selected='selected="on"';
$sel.='<option '.$selected.' value="'.$act["activiteit"].'">'.$act["activiteit"].'</option>';
}
}
foreach($activiteiten as $act)
{
$selected='';
if($row['activiteit']!=$act['activiteit'])
$sel.='<option '.$selected.' value="'.$act["activiteit"].'">'.$act["activiteit"].'</option>';
}
$sel.='</select>';
return $sel;
}
加载中,请稍侯......
精彩评论