根据下拉列表值的变化从数据库自动填充文本框

Question

我的 jsp 页面有一个包含所有用户 ID 的 select 框。我有两个用于用户名和出生数据的文本框。当我 select 来自下拉列表的用户 ID 时，我想自动填充文本框。

我有一个单独的 Servlet class 和数据库 class 用于查询。

当我从下拉列表中 select userid 时如何自动显示文本框？我希望这个文本框不可编辑。有人可以提供示例代码吗？

Answer 1

这个 JS Fiddle 展示了如何实现它：

var $select = document.getElementById('slct'),
    $un = document.getElementById('un'),
    $dob = document.getElementById('dob'),
    val, arr, username, dob;

// usually this array is obtained from a server response 
arr = [
     usr1 = ['user1', 'dob1'],
     usr2 = ['user2', 'dob2'],
     usr3 = ['user3', 'dob3'],
     usr4 = ['user4', 'dob4']
    ];

$select.addEventListener('change', function(){
 val = this.value - 1; // because arrays start at 0.
 username = arr[val][0];
    dob = arr[val][1];
    $un.value = username;
    $dob.value = dob;
});

<select id="slct">
    <option></option>
    <option value="1">id 1</option>
    <option value="2">id 2</option>
    <option value="3">id 3</option>
    <option value="4">id 4</option>
</select>
<input type="text" id="un" disabled>
<input type="text" id="dob" disabled>

根据下拉列表值的变化从数据库自动填充文本框

Autofill textbox from database based on change of dropdown list value

javascript

model-view-controller

jsp

onchange