Отправьте значение во второе поле ввода из первого выбора поля ввода

Question

У меня есть 2 поля ввода.Когда я выбираю опцию из 1 поля ввода, скажем, «Bahamos Bank», я хочу, чтобы эта страна «Bahamos» перешла во второе поле ввода, там есть опция - «Bahamos - BS».Не знаю с чего начать.Можете ли вы дать мне несколько рекомендаций?Я могу сделать это с JQuery или мне нужно использовать Ajax для этого?

Все варианты ввода поля номер 2 у меня есть в файле php.Я использовал фреймворк Laravel PHP.

Answer 1

Вы можете использовать jQuery для вызова Ajax.Вы можете сделать что-то вроде этого на внешнем интерфейсе.

<script>
$(document).ready(function(){
    $('#idOfFirstInput').change(funcntion() {
         $.ajax({
            url: 'PHP_Controller_Function_You_Write',
            data: { 
                'bank_type': ('#idOfFirstInput').val()
            },
            type: 'POST',
            success: function(response) {
                ('#idOfSecondInput').val(response.country);
            }
        });
    });
});
</script>

Это говорит о том, что при загрузке страницы каждый раз, когда изменяется первый ввод, используйте jQuery для выполнения вызова Ajax.Вам нужно будет создать функцию PHP, которая принимает значение первого ввода и возвращает Json со свойством 'country', которое будет устанавливать значение второго ввода, когда вызов Ajax завершится успешно.Убедитесь, что в вашем входе есть теги id = "Whither", чтобы jQuery мог получить к ним доступ, например, $ ('# Whither').

Answer 2

Может как то так?

<select class="dropdown">
  <option value="-">Please select..</option>
  <option value="Netherlands">Netherlands Amsterdam</option>
  <option value="Germany">Germany Berlin</option>
  <option value="Russia">Russia Moscow</option>
</select>

<input class="country" readonly type="text" value="" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    $('document').ready(function(){
		$('.dropdown').change(function(){
			$('.country').val($(this).val());
		});
	});
</script>

Answer 3

Вы можете привязать событие фокусировки к первому входу и обновить второе значение входа при срабатывании события фокуса;

First Input : <input type="text" id="input1"> </input><br/>
      Second Input: <input type="text" id="input2"> </input>

      <script>

        document.getElementById("input1").addEventListener('focusout',function () { 
            document.getElementById("input2").value = this.value;
        });   
      </script>