如何使用jQuery实现点击表格列表项修改select下拉框选中值

问题排查结果 #

我梳理了你的代码，发现3个核心问题导致功能失效：

• 多余的事件触发逻辑：你给<td>绑定了点击事件，点击后触发#select-ac的点击事件，但#select-ac是无任何事件绑定的空div，虽然不直接导致功能失效，但属于冗余逻辑
• 类型不匹配：jQuery的data()方法会自动将纯数字的属性值转为Number类型，但你下拉框<option>的value都是String类型，类型不一致导致val()无法匹配到对应选项，自然无法选中
• （可选优化）变量拼写错误：你声明的indsutrytypeid变量拼写错误（正确应为industrytypeid），不过你后续赋值没有复用该变量，因此不影响运行，但建议修正避免后续出错

修复方案 #

核心修改点 #

1. 删掉多余的td点击事件
2. 取自定义属性时改用attr('data-xxx')获取字符串类型的值，保证和下拉框option的value类型匹配
3. 修正拼写错误的变量名（可选）

修复后的完整JS代码 #

$(document).ready(function(){
  // 删掉原来的td点击冗余逻辑
  $(document).on('click', '.table-autocomplete-value', function () {
    // 用attr取字符串类型值，保证和option的value类型匹配
    let letidValue = $(this).attr('data-letid');
    let industrySize = $(this).attr('data-industrysize');
    let industrytypeid = $(this).attr('data-industrytypeid');

    if(letidValue === null || letidValue === ''){
      console.log(letidValue)
      console.log(industrySize)
      console.log(industrytypeid)
      
      $("select[name='account-industrySize']").val(industrySize).change();
      $("select[name='account-industrySize']").prop("disabled", false);
      $("select[name='account-industryType-id']").val(industrytypeid).change();
      $("select[name='account-industryType-id']").prop("disabled", false);
      $("select[name='account-legalEntityType-id']").val(letidValue).change();
      $("select[name='account-legalEntityType-id']").prop("disabled", false);
    }else{
      console.log(letidValue)
      console.log(industrySize)
      console.log(industrytypeid)

      $("select[name='account-industrySize']").val(industrySize).change();
      $("select[name='account-industrySize']").prop("disabled", true);
      $("select[name='account-industryType-id']").val(industrytypeid).change();
      $("select[name='account-industryType-id']").prop("disabled", true);
      $("select[name='account-legalEntityType-id']").val(letidValue).change();
      $("select[name='account-legalEntityType-id']").prop("disabled", true);
    }
  })
})

额外优化建议 #

你现有两个下拉框的id都为company-classified，属于id重复，不符合HTML规范，建议修改为不同的id值避免后续其他逻辑出错。

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