当从d3.js创建的下拉选择框中选择一个选项时，发送给按钮的值变为未定义

下面的代码非常适合测试，我只是在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" width="100%" height="282" 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;

CSVfile"Lista_de_Jogos.csv"is:

label,value,market
,,
hotel,bus,party
house,car,work

选择框完美地显示了两个属性:

<option value="car" market="work">house</option>

但是当我选择这个<option> house，而不是action的#botao-de-jogo-betfair-1保持值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完美。

您正在从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;

你可以做的另一个改进是我们可以给出表单名并使用它从文档

访问表单

<form name="myform" action="" method="post" id="formulario-radar-1">
...
</form>

then in javascript

var value_1_2 = d3.select(this.options[this.selectedIndex]).attr("market");
document.forms["myform"].action = value_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属性。

相关内容

最新更新

热门标签：