jQuery动态生成联动select赋值成功但值不显示问题求助

问题原因 #

• select控件使用val()赋值的前提是，控件内部存在对应value属性的<option>节点。你的代码中第二个联动select（.slart1）默认仅包含1个空值option，你赋值的目标值没有对应的option节点，因此无法展示选中效果。input属于纯输入类控件无需预设选项，因此赋值逻辑可以正常生效。

解决方案 #

你需要在给第二个select赋值前，先根据第一个select的选中值，把对应可选的option节点渲染到第二个select中，再执行赋值操作，修正后的代码如下：

const campos_max = 10;
let x = 0;
$('#add_field').click(function(e) {
  e.preventDefault();
  if (x < campos_max) {
    $('#listas').append(`<div class="teste"><select class="form-control1 Reff${x}" name="Ref[]"><option></option></select><select class="slart1 form-control1 Desigg${x}" name="Reef1"><option ></option></select></div>`)
  }
  var html = $(`.Reff${x}`);
  html.append(`<option value="A">A</option><option value="B">B</option><option value="C">C</option>`);
  x++;
});

$(document).on("change", "select[class*=Reff]", function() {
  var Refart = $(this).val();
  var $secondSelect = $(this).closest(".teste").find(".slart1");
  // 清空原有option
  $secondSelect.empty();
  // 这里替换为你的实际数据库查询逻辑，拿到对应第二个select的选项列表
  let optionList = [];
  if(Refart === 'A') {
    optionList = [{value: 'A1', text: 'A选项对应的选项1'}, {value: 'A2', text: 'A选项对应的选项2'}]
  } else if(Refart === 'B') {
    optionList = [{value: 'B1', text: 'B选项对应的选项1'}, {value: 'B2', text: 'B选项对应的选项2'}]
  } else if(Refart === 'C') {
    optionList = [{value: 'C1', text: 'C选项对应的选项1'}, {value: 'C2', text: 'C选项对应的选项2'}]
  }
  // 渲染option到第二个select
  optionList.forEach(item => {
    $secondSelect.append(`<option value="${item.value}">${item.text}</option>`)
  })
  // 此时再赋值就可以正常展示选中效果，替换为你实际要选中的值即可
  const targetValue = optionList[0].value;
  $secondSelect.val(targetValue)
});

原有HTML代码无需改动。

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