代码之家 › 专栏 › 技术社区 › Michael Meadows

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

html jquery javascript

Michael Meadows · 技术社区 · 16 年前

我有一个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>

我所面临的问题是,在加载页面后显示列表,并且所选的选项在非常长的列表中间,即将选中的选项滚动到列表的顶部(这就是我想要的)。Firefox、Chrome、Opera和Safari在底部显示它(我不想要)。我不得不假设IE做得不对,因为其他人都在底部显示它。

如何强制浏览器在列表顶部显示所选项目。我不想 ,我只希望它滚动,使选定的选项位于顶部。

奖金 ,如果我能把它排在榜首第四就更好了,但是如果太难的话,没有它我也能活下去。

5 回复 | 直到 16 年前

Vitalii Fedoryshyn 15 年前

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

Sparafusile 16 年前

你不能这样做。行为由浏览器(或者IE的操作系统)定义,不能用代码更改。我无法理解你为什么需要这个。

Ben Butler-Cole 16 年前

永不言败。我面临着完全相同的问题。我有几个部分的答案——当然,有了在座各位的共同智慧,这些答案是可以改进的。

下面是第二个选项的jQuery代码:

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

这几乎

有什么想法吗?

d2burke 16 年前

将HTML设置为变量怎么样。然后移除();它…然后prepend()保存的变量的内容?太多

-3

Shadow Wizard 13 年前

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