Question

我有一个类似于此的HTML选择（值是假的）

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

我遇到的问题是，在加载页面后显示列表并且所选选项位于很长列表的中间时，IE会将所选选项滚动到列表顶部（这就是我想要的）。 Firefox，Chrome，Opera和Safari将它显示在底部（我不想要）。我不得不假设IE做错了，因为其他人都在底部显示它。

如何强制浏览器在列表顶部显示所选项目。我不想把它放在列表的顶部，我只是想让它滚动，使所选的选项位于顶部。

奖励，如果我能把它排在第四位，那就更好了，但是如果它太难了我就能活下去。

Answer 1

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

Answer 2

你不能这样做。该行为由浏览器（或IE中的操作系统）定义，并且不能使用代码进行更改。为什么你需要这个超出了我的理解。

我建议您制作自己的“选择”对象，其行为符合您的要求。您可以使用隐藏的div和JavaScript的onClick事件处理程序来模拟正常的选择。然后你就可以按照自己想要的方式行事。

Answer 3

永远不要说永远。我面临着同样的问题。我有几个部分答案 - 当然，每个人的智慧都可以得到改善。

对于10个项目的选项框，您可以选择要在顶部显示的项目下方的项目10。也许您可以使用CSS使其看起来像您真正想要的那样。
将选择向下滚动到底部（通过选择最后一个选项），然后返回到您真正想要的那个。至少在Firefox上，选择框似乎可以通过滚动来工作，直到所选选项在视图中然后停止。

这是我的第二个选项的jQuery代码：

select.val(select.find('option:last').val());
select.val(selectedValue);

此几乎有效。如果我在Firebug的调试器中跳过上面的行，它就可以工作，但如果我让代码正常运行则不行。

有什么想法吗？

Answer 4

如何将HTML设置为变量。然后删除（）;它....然后prepend（）保存变量的内容？太多了？

Answer 5

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

如何在顶部的<select>中显示所选项目</select>

5 个答案: