HTML 将下拉菜单 select 重置为默认值

Question

我有一个这样的 select 菜单：

第一个 option 标签是我的占位符，如果我单击 select 菜单，它会被停用。

$('select').each(function(){
    var $this = $(this), numberOfOptions = $(this).children('option').length;

    $this.addClass('select-hidden');
    $this.wrap('<div class="select"></div>');
    $this.after('<div class="select-styled"></div>');

    var $styledSelect = $this.next('div.select-styled');
    $styledSelect.text($this.children('option').eq(0).text());

    var $list = $('<ul />', {
        'class': 'select-options'
    }).insertAfter($styledSelect);

    for (var i = 0; i < numberOfOptions; i++) {
        $('<li />', {
            text: $this.children('option').eq(i).text(),
            rel: $this.children('option').eq(i).val()
        }).appendTo($list);
    }

    var $listItems = $list.children('li');

    $styledSelect.click(function(e) {
        e.stopPropagation();
        $('div.select-styled.active').not(this).each(function(){
            $(this).removeClass('active').next('ul.select-options').hide();
        });
        $(this).toggleClass('active').next('ul.select-options').toggle();
    });

    $listItems.click(function(e) {
        e.stopPropagation();
        $styledSelect.text($(this).text()).removeClass('active');
        $this.val($(this).attr('rel'));
        $list.hide();
        console.log($this.val());
    });

    $(document).click(function() {
        $styledSelect.removeClass('active');
        $list.hide();
    });

});

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<div class="dropdown">
    <select id="office-select">
        <option value="hide"><a>choose a number</a></option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="13">13</option>
        <option value="14">14</option>
        <option value="15">15</option>
    </select>
    <button class="resetbtn" type="submit">X</button>
</div>

这是一个工作 JSFiddle。想象一下，我们选择了数字 6，然后屏幕底部显示了一些东西。之后我想点击按钮来重置我的 select 菜单。所以文本 choose a number 应该再次显示为占位符。

这可能吗？

Answer 1

选择选项后，.select-options 会被 .next('ul.select-options').hide();

隐藏

您需要在.resetbtn点击

时再次显示

$('.resetbtn').click(function() {
    $('.select-styled').html("<a>choose a number</a>");
});

HTML 将下拉菜单 select 重置为默认值

HTML reset dropdown select menu to default value

html

javascript

jquery

select

placeholder