每行的 HTML 表格下拉值

Question

当我从下拉列表中选择时，它只会更改第一行。

我想为每一行获取不同的值。我做错了什么？如何修复它？

我的html代码：

                {% for tr in db_training %}

                <tr>

                    <td class="tweet">{{tr.tweets}}</td>

                    <td class="type">{{tr.dtype}}</td>

                    <td class="manual">

                        <select id="dselect" onchange="getValue(this)">

                            <option value="$">Pilih</option>

                            <option value="negatif">Negatif</option>

                            <option value="netral">Netral</option>

                            <option value="positif">Positif</option>

                        </select>

                    </td>

                    <td id="dselect-value"></td>

                    <td class="auto">{{tr.auto}}</td>

                </tr>

                {% endfor %}

...

            <script type="text/javascript">

            function getValue(data) {

                var myDiv = document.getElementById(data.id + '-value');

                myDiv.innerHTML = data.value;

            }

            </script>

Answer 1

您必须使用不同的 id 来选择和目标Django 模板变量forloop.counter从索引 1 开始如果您需要启动索引，0请使用forloop.counter0{% for tr in db_training %}&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td class="tweet">{{tr.tweets}}</td>&nbsp; &nbsp; &nbsp; &nbsp; <td class="type">{{tr.dtype}}</td>&nbsp; &nbsp; &nbsp; &nbsp; <td class="manual">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <select id="dselect_{{ forloop.counter }}" onchange="getValue(this)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="$">Pilih</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="negatif">Negatif</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="netral">Netral</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="positif">Positif</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; <td id="dselect_{{ forloop.counter }}-value"></td>&nbsp; &nbsp; &nbsp; &nbsp; <td class="auto">{{tr.auto}}</td>&nbsp; &nbsp; </tr>{% endfor %}

Answer 2

所有行都有相同的 id。尝试去追寻目标。这应该可以帮助你&nbsp; &nbsp; &nbsp; &nbsp; function getValue(data) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var myDiv =data.parentNode.parentNode.querySelector("#dselect-value");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; myDiv.innerHTML = data.value;&nbsp; &nbsp; &nbsp; &nbsp; }