从通过 d3.js 创建的下拉选择框中选择一个选项时，发送到按钮的值变为未定义
Posted
技术标签:
【中文标题】从通过 d3.js 创建的下拉选择框中选择一个选项时，发送到按钮的值变为未定义【英文标题】：When selecting an option from the dropdown selection box created via d3.js the value sent to the button becomes undefined 【发布时间】：2021-10-28 16:43:17 【问题描述】：下面的这段代码非常适合测试，我只是在Visual Studio Code (https://code.visualstudio.com/) 中使用它并从Live Server 扩展名(https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) 创建了页面：
<html>
<head>
</style>
<script src="https://d3js.org/d3.v4.js"></script>
</head>
<body style="background-color:black;">
<div class="row">
<div class="column left">
<form action="" method="post" id="formulario-radar-1">
<div id="caixa-suspensa-1">
<button class="button" id="botao-do-radar-1" onclick="funcao_radar_1()">Radar 1</button>
<input type="text" id="barra-de-texto-para-radar-1" style="width: 283px;">
</div>
</form>
<iframe id="iframe-do-radar-1" frameBorder="0" src="">
</iframe>
<script id="script-da-caixa-de-selecao-suspensa-1">
var select_1 = d3.select("#caixa-suspensa-1")
.append("select")
.attr("id","select-box-1")
.style("width","100%");
function caixa_suspensa_1(data)
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;
var value_1_2 = d3.select(this).property("market");
document.querySelector('#botao-de-jogo-betfair-1').action = value_1_2;
);
let update_1 = select_1.selectAll("option")
.data(data);
update_1.exit().remove();
update_1.enter().append("option").merge(update_1)
.attr("value", d => d.value)
.attr("market", d => d.market)
.text(d => d.label);
d3.csv("Lista_de_Jogos.csv", function(data)caixa_suspensa_1(data));
</script>
<form id="botao-de-jogo-betfair-1" action="" target="_blank">
<input type="submit" style="width: 100%;" value="Jogo Betfair 1"/>
</form>
</div>
</div>
</body>
</html>
生成action="undefined" 值的路径是这样的：
var value_1_2 = d3.select(this).property("market");
document.querySelector('#botao-de-jogo-betfair-1').action = value_1_2;
CSV 文件"Lista_de_Jogos.csv" 是：
label,value,market
,,
hotel,bus,party
house,car,work
选择框完美地显示了这两个属性：
<option value="car" market="work">house</option>
但是当我选择这个<option> house，而不是#botao-de-jogo-betfair-1 的action 时，保持值work 他得到值undefined：
<form id="botao-de-jogo-betfair-1" action="undefined" target="_blank">
<input type="submit" style="width: 100%;" value="Jogo Betfair 1">
</form>
注意：当我尝试使用.property("value"); 时，会完美返回值car。
【问题讨论】：
【参考方案1】：您正在从select 标记访问market 属性，而不是选择包含market 属性的option 标记。要解决这个问题，您只需要获取已选择的选项，然后使用 attr 获取值。
var value_1_2 = d3.select(this.options[this.selectedIndex]).attr("market");
document.querySelector('#botao-de-jogo-betfair-1').action = value_1_2;
您可以进行的另一项改进是我们可以提供表单名称并使用它来访问来自documemt的表单，而不是搜索from
<form name="myform" action="" method="post" id="formulario-radar-1">
...
</form>
然后在javascript中
var value_1_2 = d3.select(this.options[this.selectedIndex]).attr("market");
document.forms["myform"].action = value_1_2;
【讨论】：
嗨@Chandan 完美解决了我的问题，赏金只能在13小时内发放，我会尽快为您确认发货，非常感谢所有伙伴！ 还有@Chandan 非常感谢其他改进提示，非常感谢你，任何你认为值得改进的东西，请随意！ @BrondbyIF 没问题，我建议的另一个改进是将select_1.on 移到 caixa_suspensa_1 之外。【参考方案2】：
为什么不在这里坚持 D3：
var value_1_2 = d3.select(this).property("market");
d3.select('#botao-de-jogo-betfair-1').attr('action', value_1_2);
我认为 Element 中没有任何 action 属性。
【讨论】：
您好@SmokeyShakers，感谢您的关注，如果我输入d3.select 而不是document.select，则不会发生任何事情并且不会创建属性。因此，在这种情况下，很遗憾，您的适应症没有产生积极影响。以上是关于从通过 d3.js 创建的下拉选择框中选择一个选项时，发送到按钮的值变为未定义的主要内容，如果未能解决你的问题，请参考以下文章