如何用JavaScript实现第一个Picklist选值后同步到第二个

要实现第一个输入框（搭配datalist）选值时同步到第二个下拉框，只需添加对第一个输入框的事件监听，并补充对应的同步逻辑，具体实现如下：

修改后的完整代码 #

JavaScript 部分 #

var sMap = {};

sMap["ABC"] = ["Test2ABC", "Style"];
sMap["CDE"] = ["Test2CDE", "style"];
sMap["EFG"] = ["Test2EFG", "style"];

// 原第二个下拉框同步到第一个输入框的逻辑
function onChangeRadio(ele) {
  var id = $(ele).attr("id");
  var type = $(ele).attr("type");
  var tagName = $(ele).prop("tagName");
  if (tagName.toLowerCase() == "select") {
    var val = $(ele).val();
    $('#codes').append($("<option value='" + val + "'>" + val + "</option>"));
    setsc(val);
  } else {
    var Code = Object.keys(sMap).find(key => sMap[key].includes(id));
    setsc(Code);
  }
}

// 新增：第一个输入框同步到第二个下拉框的函数
function syncToTest2(val) {
  // 检查值是否在第二个下拉框的选项中存在，存在则设置选中
  if ($('#Test2 option[value="' + val + '"]').length > 0) {
    $('#Test2').val(val);
    window.dispatchEvent(new Event('resize'));
  }
}

function setsc(val) {
  $('[name="Code"]').val(val);
  window.dispatchEvent(new Event('resize'));
}

// 页面加载完成后，给第一个输入框绑定事件
$(document).ready(function() {
  // 监听输入/选择事件，实时同步
  $('#slist').on('input change', function() {
    var selectedVal = $(this).val();
    syncToTest2(selectedVal);
  });
});

HTML 部分 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td id="TD1">
  <input type="hidden" name="Test1" id="hidden-test1" value="">
  <input list="codes" name="Code" id="slist" class="Mandatory">
  <datalist id="codes">
             <option value="">--  Choose one  --</option>
             <option value="ABC">Testing 1</option>
             <option value="CDE">Testing 2</option>
             <option value="EFG">Testing 3</option>
             <option value="ABC">worker</option>
         <option value="NAP">Port</option>
          </datalist>
</td>

<select name="T-Test2" id="Test2" onchange="onChangeRadio(this)">
  <option value="" selected="">Choose one</option>
  <option value="ABC">Testing 1</option>
  <option value="CDE">Testing 2</option>
  <option value="EFG">Testing 3</option>
</select>

关键说明 #

• 绑定input事件是为了实时响应用户从datalist选值或手动输入的操作，change事件则在输入框失焦时触发，两者结合确保同步及时。
• syncToTest2函数中先判断值是否存在于第二个下拉框的选项中，避免用户输入无效值时出现异常。
• 只要两个控件的value值一致（比如第一个输入框选ABC，不管显示的是Testing1还是worker），第二个下拉框都会自动选中对应的选项。

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