基于输入框值联动修改下拉选单选项选中状态

你可以通过监听输入框的输入事件，实时匹配下拉选单的value值来实现需求，以下是具体实现方案：

方案1：原生JavaScript实现 #

保持你的HTML结构不变，添加以下代码实现正向联动：

// 监听输入框的输入事件（覆盖键盘输入、粘贴等所有输入行为）
document.getElementById('search').addEventListener('input', function() {
  const inputValue = this.value.trim();
  const selectElement = document.getElementById('custlist');
  let hasMatch = false;

  // 遍历下拉选单的所有选项
  for (const option of selectElement.options) {
    // 精确匹配value值
    if (option.value === inputValue) {
      option.selected = true;
      hasMatch = true;
      break;
    }
  }

  // 无匹配项时选中默认的空选项
  if (!hasMatch) {
    selectElement.selectedIndex = 0;
  }
});

// 保留你原来的反向联动功能
function changeFunc() {
  const x = document.getElementById("custlist").value;
  document.getElementById("search").value = x;
}

方案2：jQuery简化实现 #

如果你习惯用jQuery，代码会更简洁：

// 正向联动：输入框内容匹配下拉选单value
$('#search').on('input', function() {
  const inputVal = $(this).val().trim();
  // 直接设置下拉选单的value，jQuery会自动找到对应选项
  $('#custlist').val(inputVal);
  
  // 如果没有匹配到对应value，重置为默认选项
  if ($('#custlist').val() !== inputVal) {
    $('#custlist').val('');
  }
});

// 保留原来的反向联动功能
function changeFunc() {
  const x = $("#custlist").val();
  $("#search").val(x);
}

扩展：前缀匹配（输入部分内容即可匹配） #

如果需要实现输入1001就自动选中所有value以1001开头的选项（比如100123、100124），可以修改匹配逻辑：

document.getElementById('search').addEventListener('input', function() {
  const inputValue = this.value.trim();
  const selectElement = document.getElementById('custlist');
  let hasMatch = false;

  if (inputValue) {
    for (const option of selectElement.options) {
      // 前缀匹配value值
      if (option.value.startsWith(inputValue)) {
        option.selected = true;
        hasMatch = true;
        break;
      }
    }
  }

  if (!hasMatch) {
    selectElement.selectedIndex = 0;
  }
});

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