在下拉选择选项的 hover 上隐藏/显示 div

Question

$('#dropdown-list').on('change',function(){
  if( $(this).val()==="option 1" ){
    $("#diva").hide()
  } else {
    $("#divb").show()
  }
});

I am using the above to hide/show a div when a dropdown selection is selected, that works. Now I need to enhance this. I want to hide/show a div while hovering the dropdown options. Is that an option as well?

Answer 1

You can create a css class

hide {
 display: none;
}

Then add a hover event on your element:

$('#dropdown-option').on('hover', function(e) {
  // Add class to your element or other div with .addClass(className) or .removeClass(className) 
});

OR (it depend the behavior your really need)

$('#div').on('mouseover', function(e) {
  // Add class to your element or other div
});

You should test both.

You can also use directly.hover() from jQuery https://api.jquery.com/hover/

Answer 2

If you have many options, your code will become a nightmare. I recommend using data- attributes and options within a select.

 $('#mySelectOptions').on('mouseover', function () { // Eg allows you to get/set the selected Id var idSelectedOption = $(this).children('option:selected').data("idresult"); // Show the div for the selected Option, & Hide the other siblings, or add/any more class names for desired purpose. $('#'+idSelectedOption).show().siblings('div').hide(); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script> <select id="mySelectOptions"> <option data-idresult="1" value="Value test 1">TEST 1</option> <option data-idresult="2" value="Value test 2">TEST 2</option> <option data-idresult="3" value="Value test 3">TEST 3</option> </select> <div id="1" style="display:none;">Div value for idresult=1</div> <div id="2" style="display:none;">Div value for idresult=2</div> <div id="3" style="display:none;">Div value for idresult=3</div>