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

Question

Hello and I thank you for taking the time to read my question.

This is my first post, I have tried to be as comprehensive as possible and follow the expected requirements of posting!

My set up

I have a data table populated from a mysql database, each row has an 'Edit' button.

The 'Edit' button opens a modal with the data from the row. This all works correctly.

In the modal form, I have a 'select' dropdown element with an 'onchange' event to trigger a message.

The issue

From within the first modal (opened from the first table row's 'Edit' button) the message is triggered no problem - in the modal window linked to the first row.

But if I click on any other row's 'Edit' button to launch it's modal - and then I change the 'select' dropdown value, the message is not displayed - as if the javascript function is not being processed.

My Research so far

Having spent time googling and searching through Stack Overflow, I think the problem could be related to non-unique IDs or Class Names - and may be they should be different for each record row?

I tried to implement this by generating ID names and Class Names dynamically by using the row's ID number - so each modal had it's own unique ID for the 'select' element - but this did not fix the issue.

I am also thinking it could be a cache issue where the script is holding on to old data, but it does not matter if I click the first row on the first time, or if I click the first row after clicking several other rows before it, it is only the first row which successfully processes the onchange event.

My files

---

index.php (to display the data table and 'Edit' buttons)

    <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 (the modal content with 'select' element and message 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>

---

script (at the bottom of button.php to trigger the message)

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

Answer 1

You just need to pass your ids as parameters as shown below. Since you already have a unique id from $row['fruitID'], you can just append that number to each id so that they will be unique too.

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