如何通过JQuery获取表单下拉选项中的用户first_name字段

没问题，我帮你梳理下几种可行的解决思路，根据你下拉选项的实际结构来选择对应的实现方式：

场景1：下拉选项的显示文本就是用户姓名（value存用户ID） #

这是最常规的表单下拉设置，value存储用户ID，选项显示的文本就是用户姓名。这种情况下直接获取选中选项的文本即可：

HTML结构示例 #

<!-- 你的用户选择下拉 -->
<select id="teamUserSelect">
  <!-- 示例选项：value是用户ID，显示文本是姓名 -->
  <option value="101">Alice Smith</option>
  <option value="102">Bob Johnson</option>
</select>

<!-- 需要设置标题的目标div -->
<div id="userTitleDiv"></div>

jQuery实现代码 #

// 监听下拉选择变化事件
$('#teamUserSelect').on('change', function() {
  // 获取选中选项的文本（即用户姓名）
  const selectedUserName = $(this).find(':selected').text();
  // 将姓名设置为目标div的标题，这里用h3标签示例，你可以根据需求调整
  $('#userTitleDiv').html(`<h3>${selectedUserName}</h3>`);
});

场景2：下拉选项的value同时存储了ID和姓名（格式如「ID|姓名」） #

如果你的选项value是把ID和姓名拼接在一起的（比如value="101|Alice Smith"），可以通过拆分value来提取姓名：

HTML结构示例 #

<select id="teamUserSelect">
  <option value="101|Alice Smith">Alice Smith</option>
  <option value="102|Bob Johnson">Bob Johnson</option>
</select>
<div id="userTitleDiv"></div>

jQuery实现代码 #

$('#teamUserSelect').on('change', function() {
  const fullValue = $(this).val();
  // 按分隔符拆分value，这里假设用「|」分隔，你可以换成实际的分隔符
  const [userId, userName] = fullValue.split('|');
  // 设置div标题
  $('#userTitleDiv').html(`<h3>${userName}</h3>`);
});

场景3：用自定义data属性存储姓名（更规范的做法） #

如果希望value只存用户ID，同时单独存储姓名信息，可以给选项添加data-name这类自定义属性，这样获取姓名会更清晰：

HTML结构示例 #

<select id="teamUserSelect">
  <option value="101" data-name="Alice Smith">Alice Smith</option>
  <option value="102" data-name="Bob Johnson">Bob Johnson</option>
</select>
<div id="userTitleDiv"></div>

jQuery实现代码 #

$('#teamUserSelect').on('change', function() {
  // 通过data()方法获取自定义属性中的姓名
  const selectedUserName = $(this).find(':selected').data('name');
  $('#userTitleDiv').html(`<h3>${selectedUserName}</h3>`);
});

针对你提到的「需要将选项id设为存储在val中的值」——如果是指选项的value属性存储用户ID，那上面的场景1和场景3都是符合这个需求的，同时能轻松获取到用户姓名。如果是指给<option>标签设置id属性（比如id="user_101"），那也可以通过:selected选择器获取到该选项的id，不过一般来说用value存ID就足够了，不需要额外给选项加id。

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