Для этого вы можете подключиться к input
событию текстовых полей. Затем вы можете создать новые option
элементы для каждого текстового поля (на основе его id
) или обновить его, если он уже существует. Попробуйте следующее:
$(function() {
$(".position").on('input', function() {
var $option = $(`#dropdown_change option[data-pos="${this.id}"]`);
if (!$option.length)
$option = $(`<option data-pos="${this.id}" />`);
$option.text(this.value).val(this.value).appendTo('#dropdown_change');
});
});
.position {
width: 665px;
padding: 0px;
z-index: 2;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Chairperson: <input name="Chairperson" id="chair" type="text" maxlength="50" class="position" /><br />
President: <input name="President" id="pres" type="text" maxlength="50" class="position" /><br />
VicePresident: <input name="VicePresident" id="vice" type="text" maxlength="50" class="position" /><br />
<select id="dropdown_change">
<option value="">Options here</option>
</select>
Вы постоянно модифицируете прямоугольник одного и того же объекта. Это не может работать.
Вместо этого создайте список координат и перенесите одно и то же изображение в разные пункты назначения на основе этого списка.