如何在HTML中使用Javascript為表單的重置或取消按鈕提供重新選擇已選選項並保持相同狀態的功能?
P粉726133917
P粉726133917 2023-09-10 22:38:33
0
1
577

在使用者在選擇元素上進行了一些選擇變更後,當使用者想要取消或重置表單時,需要顯示給使用者係統選擇的選項。 (重點是重置表單選擇元素,在取消或重置表單時返回視圖中的預設選取選項值)

<button>重置</button>
    <select>
      <option>1</option>
      <option>2</option>  
      <option>3</option>
    </select>
    
    <select class="jbselect">
      <option>a</option>
      <option >b</option>
      <option selected>c</option>
    </select>
P粉726133917
P粉726133917

全部回覆(1)
P粉842215006

這是一種保留選擇歷史並允許在每次重置按鈕點擊時回滾值的方法...

let history = []
$(function() {
  $('.jbselect').change(function() {
    history.push($(this).val());
  })
  // start it off
  history.push($('.jbselect').val());
})

$("button").click(function() {
  if (history.length == 1) return
  // remove latest value
  history.splice(-1, 1)
  $('.jbselect').val(history.at(-1))
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>重置</button>
<select>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

<select class="jbselect">
  <option>a</option>
  <option>b</option>
  <option selected>c</option>
</select>
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板