Question 2660 in Wordpress Question posted in
The official Wordpress documentation can be found here.

How to hide option in drop down menu? – WordPress

I’m trying to hide the "Select Value" option in the drop down menu of a plugin I have for my wordpress, I’ve tried the following code:

div.calc-drop-down-box.calc_dropDown_field_id_0 {
    
            visibility: hidden !important;

}

But this doesn’t work. What am I doing wrong?

Tags:

2

Answers


  1. 0

    You can use the jQuery click() method in combination with the on() method to hide the dropdown menu when the user click outside of the trigger element.

    here is the example code

    <html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Hide Dropdown on Click Outside</title>
<style>
    ul{
        padding: 0;
        list-style: none;
        background: #f2f2f2;
    }
    ul li{
        display: inline-block;
        position: relative;
        line-height: 21px;
        text-align: left;
    }
    ul li a{
        display: block;
        padding: 8px 25px;
        color: #333;
        text-decoration: none;
    }
    ul li a:hover{
        color: #fff;
        background: #939393;
    }
    ul li ul.dropdown-menu{
        min-width: 100%; /* Set width of the dropdown */
        background: #f2f2f2;
        display: none;
        position: absolute;
        z-index: 999;
        left: 0;
    }
    ul li ul.dropdown-menu li{
        display: block;
    }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    $(document).ready(function(){
        // Show hide popover
        $(".dropdown").click(function(){
            $(this).find(".dropdown-menu").slideToggle("fast");
        });
    });
    $(document).on("click", function(event){
        var $trigger = $(".dropdown");
        if($trigger !== event.target && !$trigger.has(event.target).length){
            $(".dropdown-menu").slideUp("fast");
        }            
    });
</script>
</head>
<body>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li class="dropdown">
            <a href="#">Products ▾</a>
            <ul class="dropdown-menu">
                <li><a href="#">Laptops</a></li>
                <li><a href="#">Monitors</a></li>
                <li><a href="#">Printers</a></li>
            </ul>
        </li>
        <li><a href="#">Contact</a></li>
    </ul>
</body>
</html>
    Login or Signup to reply.
  2. 0

    Try this:

    .calc-drop-down.ccb-appearance-field.ccb-field option:first-child {
  display: none;
}

    It gets the first child of type ‘option’ and hides it from the dropdown
    https://jsfiddle.net/shn5dcmu/1/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search