如何为jQuery动态生成的select下拉框设置与变量值匹配的选中option？

现有代码问题修正 #

• 动态生成select的代码中存在重复id属性，同时定义了id="fraction"和id="navigationMethod"，会导致选择器匹配异常，请删除多余的id，保留id="fraction"即可。
• 存储选中值的代码中变量赋值语法错误，应将var selectedOption : '';修正为var selectedOption = '';。

核心实现逻辑 #

jQuery的val()方法天然支持动态生成表单元素的赋值操作，只要赋值时目标select元素已经被挂载到DOM树中，传入目标值即可自动匹配对应value的option并选中，无需手动操作option的selected属性。

分场景代码实现 #

场景1：点击编辑按钮时下拉框已存在于DOM

直接绑定编辑按钮的点击事件赋值即可：

$('#editBtn').on('click', function() {
  $('#fraction').val(selectedOption);
});

场景2：点击编辑按钮时才生成下拉框

需要先将下拉框追加到DOM，再执行赋值操作：

$('#editBtn').on('click', function() {
  // 先生成并追加下拉框到页面
  $("#optionPanel").append('<div class="form-group col-md-3"><select id="fraction" class="form-control" width="100%"><option value="0.0" selected="">Nothing</option><option value="1.0">100%</option><option value="0.9">90%</option><option value="0.8333333">83.33333%</option></select>');
  // 追加完成后赋值回显
  $('#fraction').val(selectedOption);
});

异常排查 #

如果赋值后未生效，请优先检查两个点：

• selectedOption的值与对应option的value完全匹配，没有多余的空格、小数点位数差异，数据类型兼容即可
• 执行赋值代码时，下拉框已经被挂载到DOM，可以在赋值前通过console.log($('#fraction').length)验证，返回1说明元素存在，返回0说明元素还未生成

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