Почему событие javascript onchange работает только в первом модальном режиме из таблицы данных - PullRequest
Новая
       5

Почему событие javascript onchange работает только в первом модальном режиме из таблицы данных

0 голосов
/ 02 марта 2019

Здравствуйте, и я благодарю вас за то, что вы нашли время и прочитали мой вопрос.

Это мой первый пост, я постарался сделать его максимально полным и соответствовать ожидаемым требованиям публикации!

Мои настройки

У меня есть таблица данных, заполненная из базы данных mysql, в каждой строке есть кнопка «Редактировать».

Кнопка «Редактировать» открывает модал с данными из строки.Это все работает правильно.

В модальной форме у меня есть выпадающий элемент "select" с событием "onchange" для запуска сообщения.

Проблема

Из первого модального окна (открываемого с помощью кнопки «Редактировать» первой строки таблицы) сообщение вызывается без проблем - в модальном окне, связанном с первой строкой.

Но если я нажму накнопка «Изменить» в любой другой строке, чтобы запустить ее модально - и затем я изменяю значение выпадающего меню «выбрать», сообщение не отображается - как будто функция javascript не обрабатывается.

Мои исследованиядо сих пор

Потратив время на поиск и поиск в переполнении стека, я думаю, что проблема может быть связана с неуникальными идентификаторами или именами классов - и могут ли они быть разными для каждой строки записи?

Я пытался реализовать это, динамически генерируя имена идентификаторов и имена классов, используя идентификационный номер строки - так, чтобы у каждого модального стиля был свой уникальный идентификатор для элемента select, ноЭто не решило проблему.

Я также думаю, что это может быть проблема с кешем, когда скрипт удерживает старые данные, но это не имеет значения, если я нажму первую строку в первый раз, илиесли я щелкаю первую строку после щелчка нескольких других строк перед ней, только первая строка успешно обрабатывает событие 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>

script (внизу button.php для запуска сообщения) 

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

Ответы [ 2 ]

0 голосов
/ 02 марта 2019

Вам просто нужно передать свои идентификаторы в качестве параметров, как показано ниже.Поскольку у вас уже есть уникальный идентификатор из $ row ['fruitID'], вы можете просто добавить этот номер к каждому идентификатору, чтобы они тоже были уникальными. 

<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>
0 голосов
/ 02 марта 2019

Вы можете легко получить значение элемента select ... 

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

наберитесь терпения, пока я пытаюсь обработать наилучший способ отображения значения

...