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

Question

已解决！检查下面的解决方案

你好，我需要帮助来弄清楚这将如何进行。是这样的：

Visualization

Firebase Data

一旦用户在列表中选择 "Vehicle Number"，"VIN" 和 "Plate #" 文本框将自动更新为数据库中的相应数据。

在模拟数据的示例中，一旦用户选择 "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 element get selected select option text value notepad ++

Firebase Docs (Retrieve Data)

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

Insert data to textbox from firebase with options from a select form

html

javascript

html-select

firebase

firebase-realtime-database