使用jQuery .val()无法修改文本框值？下拉选联动失效问题

核心问题 #

你用了chosen下拉插件，这个插件会替换原生<select>的DOM结构，直接给原生select绑定change事件，在用户操作chosen生成的下拉组件时，原生事件不会被正确触发，导致赋值逻辑不执行。另外还有两处代码可以优化：

解决步骤 #

1. 监听Chosen插件的专属事件
   Chosen插件有自己的事件机制，需要用它的方式绑定change事件，确保用户操作下拉时能触发你的逻辑。
2. 简化选中值的获取
   不用选中option再取value，直接通过$(this).val()就能拿到当前选中值，更简洁可靠。
3. 用prop()设置布尔属性
   required是布尔类型的DOM属性，用jQuery的prop()方法设置比attr()更准确，attr()操作的是HTML属性，prop()操作的是DOM对象的属性。

修正后的代码 #

JavaScript 部分

// 先初始化Chosen插件（确保已引入插件JS文件）
$('#addressee_type').chosen();

// 监听下拉选择变化事件
$('#addressee_type').on('change', function() {
  var type = $(this).val();
  
  // 设置文本框为必填
  $('#name').prop('required', true);
  
  // 根据选中值赋值
  switch(type) {
    case 'I':
      $('#name').val('insured');
      break;
    case 'A':
      $('#name').val('third party adv');
      break;
    case 'C':
      $('#name').val('third party');
      break;
    default:
      $('#name').val('');
  }
});

HTML 部分

注意：需提前引入jQuery库以及Chosen插件的CSS和JavaScript资源，否则代码无法正常工作。

<div class="col-sm-4">
  <label class="required">Addressee type</label>
  <select class="form-control chosen" id="addressee_type" name="addressee_type" required>
    <option value="" selected>Please select Addressee type</option>
    <option value="I">Insured</option>
    <option value="A">Third Party Advocate</option>
    <option value="C">Third Party Claimant</option>
  </select>
</div>

<div class="col-sm-4">
  <label class='required'>Addressee Name</label>
  <input class="form-control" readonly="true" id="name" type="text" name="name">
</div>

额外说明 #

• 文本框的readonly属性不影响val()方法赋值，所以这个属性没问题。
• 如果已经在页面其他地方初始化过Chosen插件，就不需要重复调用$('#addressee_type').chosen();。

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