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>

Answer 1

http://jsfiddle.net/vcGrr/

使用Jquery很简单：

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

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

});

感谢您指出我的小提琴与代码不符 - 正确的小提琴在上面

Answer 2

你的意思是......

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

Answer 3

将id设置为<select>标记

<select id="ddl">

在文档末尾添加javascipt

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

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

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>

<强> Fiddle

Answer 6

你做不到。 select元素的实现工作，以便最初显示默认值。此外，如果显示类似“2014”的值但默认值实际为空，则会严重误导用户。您应该重新考虑原始问题（未指明的问题，使您想要实现无法实现的目标）。

您描述的行为可以使用CSS和JavaScript进行模拟，方法是构建一个看起来像select元素但完全不同编码的内容。

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

6 个答案: