Question

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

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

我的设置

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

“编辑”按钮打开一个模式，其中包含该行中的数据。这一切都能正常工作。

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

问题

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

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

到目前为止我的研究

我花了很多时间在Google堆栈溢出中进行搜索和搜索，我认为问题可能与非唯一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

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

<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>

请耐心等待我尝试显示值的最佳方式

Answer 2

您只需要将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 3

您可以仅使用this来传递javascript中的当前ID。此处是一个示例

<input type="text" id="username" class="form-control" name="username"  onchange="formhelper(this.id)">

现在在您的函数中，您可以像示例一样使用此ID

function formhelper(currentID)
{

  consolele.log('the current id is ' + currentID);
}

在此示例中，您还可以使用php标签动态地创建ID

id="<?= $value['id']?>"

为什么javascript onchange事件仅在数据表的第一个模式下起作用

3 个答案: