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

Question

我有一个像这样的选择菜单：

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

$('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>

    </select>

    <button class="resetbtn" type="submit">X</button>

</div>

这是一个正在运行的JSFiddle。假设我们选择数字 6，然后屏幕底部会显示一些内容。之后我想单击按钮来重置我的选择菜单。因此文本choose a number应该再次显示为占位符。

这可能吗？

Answer 1

选择选项后，.select-options将被隐藏.next('ul.select-options').hide();您需要在.resetbtn点击时再次显示它$('.resetbtn').click(function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;$('.select-styled').html("<a>choose&nbsp;a&nbsp;number</a>"); });