使用d3.js创建下拉选择框，选中后表单action值为undefined如何解决

错误原因 #

你遇到的undefined问题由两个错误共同导致：

• select的change事件回调中，this指向的是<select>元素本身，你自定义的market属性是绑定在<option>子元素上的，select本身不存在该属性
• market是非标准的自定义HTML属性，d3的.property()方法仅支持读取DOM内置标准属性（例如value就是select的内置属性，所以可以正常读取），自定义属性需要使用.attr()方法读取

修复代码 #

将原来的change事件回调逻辑替换为以下内容即可正常取值：

select_1
.on("change", function(d) {
  var value_1 = d3.select(this).property("value");
  document.querySelector('#barra-de-texto-para-radar-1').value = value_1;
  // 获取当前选中的option元素，再读取自定义market属性
  var selectedOption = d3.select(this).select('option:checked');
  var value_1_2 = selectedOption.attr('market');
  document.querySelector('#botao-de-jogo-betfair-1').action = value_1_2;
});

可选优化 #

• 按照HTML规范，自定义属性建议添加data-前缀，例如将属性名改为data-market，避免和未来新增的标准属性冲突，读取时使用.attr('data-market')即可
• 你的CSV文件第一行为空数据，会生成一个无意义的空白选项，可在加载CSV时先过滤空数据：

d3.csv("Lista_de_Jogos.csv", function(data){
  // 过滤label为空的无效行
  const validData = data.filter(item => item.label.trim() !== '');
  caixa_suspensa_1(validData);
});

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