亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

HTML 將下拉選擇菜單重置為默認值

HTML 將下拉選擇菜單重置為默認值

撒科打諢 2023-07-06 17:29:49
我有一個像這樣的選擇菜單:第一個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應該再次顯示為占位符。這可能嗎?
查看完整描述

1 回答

?
慕尼黑的夜晚無繁華

TA貢獻1864條經驗 獲得超6個贊

選擇選項后,.select-options將被隱藏.next('ul.select-options').hide();

您需要在.resetbtn點擊時再次顯示它

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


查看完整回答
反對 回復 2023-07-06
  • 1 回答
  • 0 關注
  • 412 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號