无法在鼠标输入时使用jquery将Focus设置为下拉列表

时间:2012-11-15 13:00:55

标签: javascript jquery html css jquery-ui

这是我的HTML代码

    <div id="mnc"> hello
</div>
<div id="slpt">
    <select id="slt">
        <option value="0">Option1</option>
        <option>Option2</option>
        <option>Option3</option>
        <option>Option4</option>
        <option>Option5</option>
</select>
</div>

这是我的jquery代码

    $(document).ready(function(){
 $('#mnc').bind({
  mouseenter: function(e) {    
     $('#slt').attr('selected', 'Option1');        
  }
 });
});

这是jsfiddle

上的工作模型

问题:在我点击下拉列表但没有选择一个元素后,我将鼠标悬停在div上面的hello文本中。我希望下拉列表在鼠标悬停时设置为默认的Option1。但它不起作用。任何一个人都可以说一下是不是错了。

修改 下面是我悬停在你好文本上的情况。我没有选择Option4 enter image description here

6 个答案:

答案 0 :(得分:4)

你也可以试试这段代码:

$(document).ready(function(){
 $('#mnc').bind({
  mouseenter: function(e) {

      $("#slt").find('option:first').attr('selected', 'selected');
  }
 });
});
​

答案 1 :(得分:3)

您没有将selected="option1"放在<select>上,而是将selected="selected"放在<option>

this

$(document).ready(function(){
 $('#mnc').bind({
  mouseenter: function(e) {    
      $('#slt option:first-child').attr('selected', 'selected');        
  }
 });
});

答案 2 :(得分:3)

只需使用:

$('#slt').val('0');

选择选项。

http://jsfiddle.net/fzpN4/4/

$(document).on("mouseenter","#mnc",function(e) {
    $('#slt').val('0');
});

答案 3 :(得分:3)

你可以这样做

$(document).ready(function(){
 $('#mnc').bind({
  mouseenter: function(e) {    
     $('#slt').val('Option1');        
  }
 });
});

DEMO

答案 4 :(得分:2)

$(document).ready(function(){
$('#mnc').bind({
  mouseenter: function(e) {    
    $('#slt').val('0').focus(); // it will set focus on first option.        
  }
 });
});

答案 5 :(得分:1)

好的,这是我的问题的工作模型 这是html代码

    <div id="mnc"> hello
</div>
<div id="slpt">
    <select id="slt">
        <option value="0">Option1</option>
        <option>Option2</option>
        <option>Option3</option>
        <option>Option4</option>
        <option>Option5</option>
</select>
</div>

这是Jquery代码

    $(document).ready(function(){
 $('#mnc').mouseover(function() {
            $('select').hide().blur().show();
        });
});

这里是jsfiddle