javascript - 如何使用自定义外观列表隐藏列表下拉列表中的选择占位符

Question

当我在列表下拉列表中打开它时，我无法隐藏第一个选项“选择一个选项...”。我怎样才能做到这一点？这是一个很好的选择示例。如何隐藏第一个选项或隐藏特定占位符“选择一个选项......”？

添加禁用或隐藏不起作用。

var numberOfSelects = $('select').length;

// Iterate over each select element
$('select').each( function() {
    
    // Cache the number of options
    var $this = $(this),
        numberOfOptions = $(this).children('option').length;
    
    // Hides the select element
    $this.addClass('hidden');
    
    // Wrap the select element in a div
    $this.wrap('<div class="select" />');
    
    // Insert a styled div to sit over the top of the hidden select element
    $this.after('<div class="styledSelect"></div>');
    
    // Cache the styled div
    var $styledSelect = $this.next('div.styledSelect');
    
    // Show the first select option in the styled div
    $styledSelect.text($this.children('option').eq(0).text());
    
    // Insert an unordered list after the styled div and also cache the list
    var $list = $('<ul />', {
        'class' : 'options'
    }).insertAfter($styledSelect);
    
    // Insert a list item into the unordered list for each select option
    for(var i = 0; i < numberOfOptions; i++) {
        $('<li />', {
            text: $this.children('option').eq(i).text()
        }).appendTo($list);
    }
    
    // Cache the list items
    var $listItems = $list.children('li');
    
    // Show the unordered list when the styled div is clicked (also hides it if the div is clicked again)
    $styledSelect.click( function(e) {
        e.stopPropagation();
        $('div.styledSelect.active').each( function() {
            $(this).removeClass('active')
                .next('ul.options').filter(':not(:animated)').slideUp(250);   
        });
        /* Use this instead of the .each() method when dealing with a large number of elements:
        for(var i = 0; i < numberOfSelects; i++) {
            if($('div.styledSelect').eq(i).hasClass('active') === true) {
                $('div.styledSelect').eq(i).removeClass('active')
                    .next('ul.options').filter(':not(:animated)').slideUp(250);
            }
        } */
        $(this).toggleClass('active')
            .next('ul.options').filter(':not(:animated)').slideToggle(250);
    });
    
    // Hides the unordered list when a list item is clicked and updates the styled div to show the selected list item
    // Updates the select element to have the value of the equivalent option
    $listItems.click( function(e) {
        e.stopPropagation();
        $styledSelect.text($(this).text())
            .removeClass('active');
        $this.val($(this).text().toLowerCase());
        $list.filter(':not(:animated)').slideUp(250);
    });
    
    // Hides the unordered list when clicking outside of it
    $(document).click( function() {
        $styledSelect.removeClass('active');
        $list.filter(':not(:animated)').slideUp(250);
    });
    
});

body {
    padding: 50px;
}
body > div {
    display: inline-block;
    margin-bottom: 20px;
    margin-right: 20px;
}
label {
    color: #444;
    display: inline-block;
    font: bold 16px/1.5 sans-serif;
}
ul {list-style-type:none;}
label:after {
    content: ':';
}
.hidden {
    visibility: hidden;
}
.select {
    cursor: pointer;
    display: inline-block;
    padding-right: 16px;
    position: relative;
    -webkit-user-select:none;
       -moz-user-select:none;
        -ms-user-select:none;
         -o-user-select:none;
            user-select:none;
            height:45px;
}
.styledSelect {
    background-color: #000;
    background-image: url('http://cdn3.iconfinder.com/data/icons/fatcow/16x16_0140/bullet_arrow_down.png'),
                      -webkit-linear-gradient(hsla(0,0%,100%,.1), hsla(0,0%,0%,.1));
    background-image: url('http://cdn3.iconfinder.com/data/icons/fatcow/16x16_0140/bullet_arrow_down.png'),
                         -moz-linear-gradient(hsla(0,0%,100%,.1), hsla(0,0%,0%,.1));
    background-image: url('http://cdn3.iconfinder.com/data/icons/fatcow/16x16_0140/bullet_arrow_down.png'),
                          -ms-linear-gradient(hsla(0,0%,100%,.1), hsla(0,0%,0%,.1));
    background-image: url('http://cdn3.iconfinder.com/data/icons/fatcow/16x16_0140/bullet_arrow_down.png'),
                           -o-linear-gradient(hsla(0,0%,100%,.1), hsla(0,0%,0%,.1));
    background-image: url('http://cdn3.iconfinder.com/data/icons/fatcow/16x16_0140/bullet_arrow_down.png'),
                              linear-gradient(hsla(0,0%,100%,.1), hsla(0,0%,0%,.1));
    background-position: 97% 60%;
    background-repeat: no-repeat;
    border-radius: 0px;
    bottom: 0;
    color: #fff;
    font: 14px/24px sans-serif;
    left: 0;
    padding: 10px 8px;
    position: absolute;
    right: 0;
    top: 0;
}
.styledSelect:hover {
    background-color: #000; color:#fff;
}
.styledSelect:active,
.styledSelect.active {
    background-color: #000; color:#fff;
}
.options {
    background: #000;
    border-radius: 0 0 3px 3px;

    color: #fff;
    display: none;
    font: 14px/24px sans-serif;
    left: 0px;
    margin: 0;
    padding: 0;
    position: absolute;
    right: 0px;
    top: 97%;
    z-index: 999;
}
.active + .options {
    z-index: 9999;
}
.options li {
    padding: 10px 10px;
}
.options li:last-child {
    border-radius: 0 0 0px 0px;
}
.options li:hover {
    background: #fff;
    color: #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="favouriteAnimal">
        <option value="">Select an option&hellip;</option>
        <option value="antelope">Antelope</option>
        <option value="dugong">Dugong</option>
        <option value="giraffe">Giraffe</option>
        <option value="koala">Koala</option>
        <option value="turkey">Turkey</option>
        <option value="wombat">Wombat</option>
    </select>

标签： javascripthtmlcssselect

Answer 1

这个怎么样？：

select:first-child { 
   display: none;
}

将此应用于选择元素的单击操作。