使用选择表单中的选项将数据从 Firebase 插入文本框

Question

已解决！请在下面查看解决方案

您好，所以我需要帮助来弄清楚这将如何进行。情况是这样的：

可视化

火力基础数据

用户在列表中选择"车辆编号"后，"VIN"和"车牌#"文本框将使用数据库中的相应数据自动更新。

在模拟数据的示例中，一旦用户选择"A_012"，VIN只读文本框应仅显示"KIA9183891284"，板#应仅显示"KIA-0987"。

这是目前我使用的HTML和JS代码

.HTML：

<div class="form-group">
<label for="vehinum">Vehicle Number</label>
<select class="form-control" name="vehicle_num" id="vehinumInput">
</select>
</div>
<div class="form-group">
<label for="vin">VIN</label>
<input type="text" name="vin" class="form-control" id="vinInput" readonly="true">
</div>
<div class="form-group">
<label for="platenum">Plate #</label>
<input type="text" name="plate_no" class="form-control" id="platenoInput" readonly="true">
</div>

.JS：

var database = firebase.database();
database.ref('vehicles').once('value', function(snapshot){
if(snapshot.exists()){
var vehi_list = '';
snapshot.forEach(function(data){
var val = data.val();
vehi_list += '<option value="' + val.vehicle_number + '">' + val.vehicle_number + '</option>';
});
$('#vehinumInput').append(vehi_list);
}

我真的不知道如何从这里前进。因此，我正在寻找有关这将如何进行的建议或答案。

感谢您抽出宝贵时间阅读！

Answer 1

所以经过大量的研究，我终于找到了答案

.HTML：

<div class="form-group" id="vehi_num_mainte">
<label for="exampleFormControlInput100">Vehicle Number</label>
<select class="form-control" name="vehicle_num1" id="numberInput1" onchange="vehi_num_mainte_event();">
<option>-- Select Vehicle --</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlInput101">VIN</label>
<input type="text" name="vin_maintenance" class="form-control" id="vinInput1" readonly="true">
</div>
<div class="form-group">
<label for="exampleFormControlInput102">Plate #</label>
<input type="text" name="plate_no1" class="form-control" id="platenoInput1" readonly="true">
</div>

.JS：

function vehi_num_mainte_event()
{
//Get text or inner html of the selected option
var d = document.getElementById("numberInput1");
var selectedText = d.options[d.selectedIndex].text;
firebase.database().ref('vehicles').child('vehicle_number').on('value', function(vehinumSnapshot) {
var vehinumChildSnapshot = vehinumSnapshot.val();
var queryRef = firebase.database().ref('vehicles').orderByChild('vehicle_number').equalTo(selectedText);
queryRef.on('value', function(querySnapshot) {
querySnapshot.forEach(function(dinoSnapshot) {
var vin_mainte = '';
var plate_mainte = '';
var val = dinoSnapshot.val();
vin_mainte += val.vin;
plate_mainte += val.plate_no;
document.getElementById('vinInput1').value = vin_mainte;
document.getElementById('platenoInput1').value = plate_mainte;
});
});
});
}

这些是我的参考资料：

Javascript HTML 元素获得选择选择选项文本值记事本 ++

Firebase 文档(检索数据(