У меня есть страница Laravel, где есть выпадающий список с названиями городов. В соответствии с этим я создал раскрывающийся список зависимостей, содержащий сотрудников, проживающих в этом городе, которые были извлечены из базы данных. Я также реализовал плагин ввода токена в раскрывающемся списке сотрудников.
После выбора города страница выглядит следующим образом: ![enter image description here](https://i.stack.imgur.com/K4cXv.png)
При первом выборе отображается только одно текстовое поле. Однако после первого выбора при выборе другого города отображаются несколько текстовых полей:
![my page looks like this:](https://i.stack.imgur.com/VN3ff.png)
Мне не нужны несколько текстовых полей. Я хочу только одно текстовое поле после первого выбора.
<!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>