Here is my html code

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

Here is my jquery code

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

here is a working model on jsfiddle

The Issue: after i click on drop down list but do not select an element i hover on hello text in above div.I wanted the drop down list to be set to a default Option1 on mouse hover.But its not working.Can any one throw some light on whats goin wrong.

EDIT: Below is the condition when i hover on the hello text.I haven't selected Option4

Here is my html code

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

Here is my jquery code

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

here is a working model on jsfiddle

The Issue: after i click on drop down list but do not select an element i hover on hello text in above div.I wanted the drop down list to be set to a default Option1 on mouse hover.But its not working.Can any one throw some light on whats goin wrong.

EDIT: Below is the condition when i hover on the hello text.I haven't selected Option4

• javascript
• jquery
• html
• css
• jquery-ui

6 Answers 6

you can also try this code:

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

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

You don't put selected="option1" on the <select>, you put selected="selected" on the <option>

Like this

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

Just use:

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

to select the option.

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

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

you can do it like this

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

DEMO ​

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

Ok so here is working model of my question Here is the html code

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

Here is the Jquery code

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

here it is in jsfiddle