为什么javascript onchange事件只能在数据表的第一个模态中工作

Question

您好，我感谢您抽出宝贵时间阅读我的问题。

这是我的第一篇文章，我尽量做到尽可能全面，并遵循发布的预期要求！

我的设置

我有一个从mysql数据库填充的数据表，每行都有一个“编辑”按钮。

“编辑”按钮打开一个包含行数据的模态。一切正常。

在模态形式中，我有一个'select'下拉元素，带有'onchange'事件来触发消息。

问题

从第一个模态（从第一个表行的“编辑”按钮打开）开始，消息被触发没有问题 - 在链接到第一行的模态窗口中。

但是，如果我点击任何其他行的“编辑”按钮来启动它的模态 - 然后我更改“选择”下拉值，则不会显示消息 - 就好像没有处理javascript函数一样。

到目前为止我的研究

花了时间谷歌搜索和搜索Stack Overflow，我认为问题可能与非唯一ID或类名相关 - 并且可能它们应该对每个记录行不同？

我尝试通过使用行的ID号动态生成ID名称和类名来实现这一点 - 因此每个模态都有自己的'select'元素的唯一ID - 但这并没有解决问题。

我也认为这可能是一个缓存问题，其中脚本保留旧数据，但是如果我第一次单击第一行，或者如果我在单击其他几行之后单击第一行并不重要，它只是成功处理onchange事件的第一行。

我的文件

---

index.php（显示数据表和'编辑'按钮）

    <table>
    <thead>
        <th>Fruit ID</th>
        <th>Fruit Name</th>
        <th>Action</th>
    </thead>
    <tbody>
        <tr>
            <td><?php echo $row['fruitID']; ?></td>
            <td><?php echo $row['fruitName']; ?></td>
            <td>
            <a href="#edit<?php echo $row['fruitID']; ?>" data-toggle="modal" class="btn btn-warning">Edit</a>
            <?php include('button.php'); ?>
            </td>
        </tr>
    </tbody>
</table>

---

button.php（带有'select'元素和消息div的模态内容）

    <div class="modal fade" id="edit<?php echo $row['fruitID']; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">

        <div class="row">
        <div>
            <select class="mySelector" id="mySelector" name="mySelector" onchange="show_value()">
                <option value="Apple">Apple</option>
                <option value="Orange">Orange</option>
                <option value="Banana">Banana</option>
                <option value="Mango">Mango</option>
            </select>
        </div>
    </div>

    <div class="row">
        <div id="result"></div>
    </div>
</div>
</div>

---

脚本（在button.php的底部触发消息）

<script>    
function show_value() {
        selected_value = document.getElementById("mySelector").value;
        document.getElementById("result").innerHTML = "Selected value is "+selected_value;
        }
</script>

Answer 1

您只需要将id作为参数传递，如下所示。由于您已经从$ row ['fruitID']获得了唯一的ID，因此您只需将该数字附加到每个ID，以便它们也是唯一的。

<div class="modal fade" id="edit<?=$row['fruitID']?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
              <div class="row">
                <div>
                  <select class="mySelector" id="mySelector<?=$row['fruitID']?>" name="mySelector" onchange="show_value('mySelector<?=$row['fruitID']?>', 'result<?=$row['fruitID']?>')">
                      <option value="Apple">Apple</option>
                      <option value="Orange">Orange</option>
                      <option value="Banana">Banana</option>
                      <option value="Mango">Mango</option>
                  </select>
              </div>
          </div>

          <div class="row">
              <div id="result<?=$row['fruitID']?>"></div>
          </div>
        </div>
    </div>
  </div>
</div>

<script>    
  function show_value(input_id, output_id) {
    selected_value = document.getElementById(input_id).value;
    document.getElementById(output_id).innerHTML = "Selected value is "+selected_value;
  }
</script>

Answer 2

您可以轻松获得选择元素值...

<script>    
    function show_value(e) { // e param is the event
        selected_value = e.value; // use e.val to get the event target value (in this case the select element value)
    }
</script>

在我尝试处理显示价值的最佳方式时请耐心等待