[英]Hide/show div on hover of dropdown selection options
$('#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. 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.
我想在悬停下拉选项时隐藏/显示一个 div。 Is that an option as well?
这也是一种选择吗?
You can create a css class您可以创建一个 css class
hide {
display: none;
}
Then add a hover event on your element:然后在您的元素上添加一个 hover 事件:
$('#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/您也可以直接使用 jQuery https://api.jquery.com/hover/中的.hover()
If you have many options, your code will become a nightmare.如果您有很多选择,您的代码将成为一场噩梦。 I recommend using
data-
attributes and options
within a select.我建议在 select 中使用
data-
属性和options
。
$('#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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.