自动定位到下拉选择框中的选项

Question

如何在下拉选框打开时定位到一个选项，但初始值应为空？

例如：

<select>
<option value="" disabled selected style="display:none"></option>//<--- Initial value
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option> // <--- Automatically points here when opened
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
</select>

- telexper

---

http://jsfiddle.net/Aqwrp/ - Karuppiah RK

初始值应为空 - telexper

Answer 1

http://jsfiddle.net/vcGrr/

使用jQuery很简单：

$("select").focus(function(){
    $("select option").filter(function() {

   return $(this).text() == "2014"; 
}).prop('selected', true);

});

感谢您指出我的代码与fiddle不匹配 - 正确的fiddle在上面。

- GrahamTheDevRel

---

但是之后您将无法选择其他值。 - telexper

Answer 2

你是不是想说...

<option value="2014" selected>2014</option>

- Deepu Sasidharan

---

初始值应为“空白”，但当选择框打开时，它将指向2014选项。 - telexper

<option value="2004" hidden>2004</option> 将隐藏此选项。这对您有帮助吗？ - Deepu Sasidharan

Answer 3

将id设置为您的<select>标签

<select id="ddl">

在文档末尾添加JavaScript。

<script type="text/javascript">
    var firstclick=0;
    document.getElementById("ddl").onclick=function(){
        if(firstclick==0){
            document.getElementById("ddl").selectedIndex=11;
            firstclick=1;
        }
    }
</script>

- Tun Zarni Kyaw

Answer 4

这是一个 jQuery 版本：jsfiddle

相关的 HTML 代码：

<select>
<option value="" disabled selected style="display:none"></option>
...    
<option id="2014" value="2014">2014</option>
...
</select>

jQuery：

var oldValue = null;
$( function ()
{
    $('select').click(function(){
    var s = $(this);
    val = s.val();

    oldValue = val;
    if( val == null )
    {
        document.getElementById("2014").selected = true;
    }
   });
});

更新

这里有一个仅包含jQuery选择器的稍微修改过的版本：jsfiddle。

唯一的更改是将2014设置为选定状态：

$("#2014").prop('selected', true);

- acarlon

Answer 5

将selected放在您想要默认显示的选项上，如下所示-

<select>
<option value=""></option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014" selected>2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
</select>

小提琴

- Rajesh Paul

Answer 6

不行。 select 元素的实现方式是最初显示默认值。此外，如果像“2014”这样的值被显示，但默认值实际上为空，那么它会严重误导用户。您应该重新考虑原始问题（使您想要实现无法实现的东西的未指定问题）。

您所描述的行为可以使用 CSS 和 JavaScript 进行模拟，通过构建看起来像 select 元素但已完全以不同方式编码的东西。

- Jukka K. Korpela