如何为可见的.seltohide类Select动态添加带Data属性的Option

没问题，我帮你调整代码，实现给可见的.seltohide选择框添加带自定义data属性的option。下面是修改后的完整代码，我会标注关键改动点：

// 你的Ajax请求部分...
success: function(data) {
  var name = 'Blue Sky';
  console.log(data); // 结果：5*lorema*loremb
  
  // 优化：一次性拆分数据到数组，避免重复调用split
  var dataParts = data.split('*');
  var id = dataParts[0];
  var uname = dataParts[1];
  var pass = dataParts[2];
  
  // 遍历所有可见的.seltohide选择框（因为可能匹配多个元素）
  $('.seltohide:visible').each(function() {
    // 创建option元素
    var option = document.createElement("option");
    option.value = id;
    option.textContent = name; // 用textContent比text更规范，兼容更多场景
    
    // 添加自定义data属性 - 两种方式任选其一
    // 方式1：传统setAttribute（兼容性更好，支持旧浏览器）
    option.setAttribute('data-uname', uname);
    option.setAttribute('data-pass', pass);
    
    // 方式2：现代DOM dataset属性（写法更简洁，推荐）
    // option.dataset.uname = uname;
    // option.dataset.pass = pass;
    
    // 将option添加到当前的选择框中
    this.add(option);
  });
}

关键改动说明： #

• 优化数据拆分：把多次调用data.split('*')改成一次性拆分到数组dataParts，代码更高效简洁。
• 遍历多个选择框：因为$('.seltohide:visible')可能匹配多个可见的select元素，用.each()遍历确保每个符合条件的选择框都能添加新option。
• 添加data属性：提供了两种添加自定义data属性的方式，你可以根据浏览器兼容性需求选择。
• 规范文本设置：用textContent替代text，这是更标准的DOM属性，兼容性也更好。

修改后生成的option会是你需要的格式：

<option value="5" data-uname="lorema" data-pass="loremb">Blue Sky</option>

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