从第一个输入字段选择中将值发送到第二个输入字段

Question

我有2个输入字段。当我从1个输入字段中选择选项时，例如说“ Bahamos银行”，我想将此国家“ Bahamos”带到第二个输入字段，这里有选项-“ Bahamos-BS”。不知道从哪里开始。你能给我一些建议吗？我可以使用jQuery还是需要使用Ajax？

我在php文件中拥有的所有2号输入字段选项。我使用Laravel PHP框架。

Answer 1

您可以在第一个输入中绑定焦点事件，并在焦点事件触发时更新第二个输入值；

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>

Answer 2

您可以使用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函数以接受第一个输入的值，并返回具有属性“ country”的Json，它将在Ajax调用成功时设置第二个输入的值。确保您的输入具有id =“ Whatever”标签，以便jQuery可以像$（'＃Whatever'）一样访问它们。

Answer 3

也许是这样吗？

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