如何使用PHP为下拉选择框动态添加可持久化保存的可选选项

你可以直接基于原有Bootstrap Select（selectpicker）组件扩展功能，通过localStorage实现选项持久化，完整实现代码如下：

1. 改造后HTML代码 #

<div class="row">
  <h2>Select Sample #1</h2>
  <select class="selectpicker" id="select1" data-live-search="true">
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
  </select>
</div>

注：新增data-live-search="true"属性开启selectpicker的内置搜索框，作为手动输入入口

2. 功能逻辑JS代码 #

// 存储key名称，可自定义修改
const STORAGE_KEY = 'custom_select_options'

// 页面初始化：读取本地存储的自定义选项，渲染到下拉框
$(function() {
  // 读取已存储的选项
  const savedOptions = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]')
  // 插入选项到下拉列表
  savedOptions.forEach(optText => {
    $('#select1').append(`<option>${optText}</option>`)
  })
  // 刷新selectpicker渲染效果
  $('#select1').selectpicker('refresh')

  // 监听搜索输入事件，判断是否需要新增选项
  $('.bootstrap-select .dropdown-menu input').on('input', function() {
    const inputVal = $(this).val().trim()
    if (!inputVal) return

    // 检查当前下拉框是否已有匹配选项
    const hasOption = $('#select1 option').filter(function() {
      return $(this).text() === inputVal
    }).length > 0

    // 无匹配选项时触发新增逻辑
    if (!hasOption) {
      // 可根据需求去掉confirm弹窗改为静默新增
      if (confirm(`是否新增选项「${inputVal}」？`)) {
        // 新增选项到下拉列表
        $('#select1').append(`<option>${inputVal}</option>`)
        $('#select1').selectpicker('refresh')
        // 自动选中新增的选项
        $('#select1').val(inputVal).trigger('change')
        // 更新本地存储
        saveOptionToStorage(inputVal)
        // 清空搜索输入框
        $(this).val('')
      }
    }
  })
})

// 存储新增选项到localStorage实现持久化
function saveOptionToStorage(optionText) {
  const savedOptions = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]')
  // 自动去重，避免重复存储相同选项
  if (!savedOptions.includes(optionText)) {
    savedOptions.push(optionText)
    localStorage.setItem(STORAGE_KEY, JSON.stringify(savedOptions))
  }
}

功能验证要点 #

• 手动输入不存在的选项内容，确认后即可完成新增，新增选项可直接选中
• 刷新页面后，之前新增的选项会自动加载到下拉列表中，可正常选择
• 重复输入相同内容不会重复存储，同一选项只会保留一条

内容的提问来源于stack exchange，提问作者FRECEENA FRANCIS