Отображение нескольких полей ввода токена - PullRequest
0 голосов
/ 09 января 2020

У меня есть страница Laravel, где есть выпадающий список с названиями городов. В соответствии с этим я создал раскрывающийся список зависимостей, содержащий сотрудников, проживающих в этом городе, которые были извлечены из базы данных. Я также реализовал плагин ввода токена в раскрывающемся списке сотрудников.

После выбора города страница выглядит следующим образом: enter image description here

При первом выборе отображается только одно текстовое поле. Однако после первого выбора при выборе другого города отображаются несколько текстовых полей:

my page looks like this:

Мне не нужны несколько текстовых полей. Я хочу только одно текстовое поле после первого выбора.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Token Input</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="{{ asset('tokenasset/jquery.tokeninput.js') }}"></script>

  <link rel="stylesheet" href="{{ asset('tokenasset/token-input.css') }}" type="text/css" />
  <link rel="stylesheet" href="{{ asset('tokenasset/token-input-facebook.css') }}" type="text/css" />

  <script type="text/javascript">
    $(function() {
      // $('#employee_select_data').html('<option>--</option>');
      $('#location_select_id').change(function() {
        var get_location_id = $('#location_select_id').val();
        var arr = [{}];

        $.ajax({
          type: 'POST',
          url: '{{route("ajaxSendmsg")}}',
          data: {
            send_location_id: get_location_id,
            _token: $('#_token').val()
          },
          dataType: 'json',
          success: function(data) {
            $.each(data.msg, function(index, value) {
              arr[index] = {
                id: index,
                name: value
              }
            });
            $("#employee_select_data").tokenInput(arr);
            console.log(arr);
          },
          error: function(res) {
            console.log(res);
          }
        });
      });
    });
  </script>
</head>
<body>
  <div class="container">
    <h2>Token Input Test</h2>
    <form>
      <input type="hidden" value="{{ csrf_token() }}" id="_token" name="_token" />
      <div class="form-group">
        <label for="sel1">Select location:</label>
        <?php if(isset($location_data)) { ?>
          <select class="form-control" id="location_select_id">
            <?php foreach($location_data as $data) { ?>
              <option value="<?php echo $data->location_id; ?>">
                <?php echo $data->location_name; ?>
              </option>
            <?php } ?>
          </select>
        <?php } ?>
        <br>
        <label for="sel2">Employee list</label>
        <select class="form-control" id="employee_select_data">
          <option value="">--</option>
        </select>
      </div>
    </form>
  </div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...