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

Question

下面这段代码非常适合测试，我刚刚在Visual Studio Code (https://code.visualstudio.com/) and created the page from the Live Server extension (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;

CSV 文件 "Lista_de_Jogos.csv" 是：

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

select离子盒完美展现了两种属性：

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

但是当我 select 这个 <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"); returns 值时 car 完美。

Answer 1

这里为什么不坚持使用 D3：

var value_1_2 = d3.select(this).property("market");
d3.select('#botao-de-jogo-betfair-1').attr('action', value_1_2);

我认为 Element 中没有任何操作属性。

Answer 2

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

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

When selecting an option from the dropdown selection box created via d3.js the value sent to the button becomes undefined

html

javascript

html-select

d3.js