javascript - 如何使用 jquery 从选择选项 ListView 中将个人信息传递到特定输入字段

Question

    firebase.auth().onAuthStateChanged(function(user) {
    console.log(user);
     if (user) {
        var user_id = user.uid;
          firebase.database().ref('Clients/'+user_id)
       .once('value').then(function(snapshot){
            snapshot.forEach(function(childSnapshot) {
              var client_name = childSnapshot.child("client_name").val();
              var client_phone = childSnapshot.child("client_phone").val();
            var client_address = childSnapshot.child("client_address").val();
    var total = client_name + "<br>" + client_phone + "<br>" + client_address;
              console.log(total);
              $('.client_option').append('<option>' + total +'</option');


                      
              });
          })
    }
    else{
        window.location.href="{% url 'login' %}";
    }


  });
    

在这段代码中，我已经获得了个人客户信息。我有 3 个输入字段。由于这些值显示为选项，我希望当用户选择一组选项(client_name、电话、地址)时，个人信息传递到特定字段。这是我的输入字段。

    <input type="text" class="form-control" id="clientName" list="client" 
    autocomplete="off">
    <datalist class="form-control client_option" id="client" hidden>
    </datalist> 
    <input type="tel" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" id="phone" 
    class="form-control" autocomplete="off">
    <input type="text" class="form-control" id="address" autocomplete="off"> 

提前致谢。

Answer 1

 function disp(){
 var client_name =  $('#client_name').val();
 var client_phone =  $('#client_phone').val();
 var client_address =  $('#client_address').val();
 var total = client_name + "-" + client_phone + "-" + client_address;
    $('.client_option').append('<option>' + total +'</option');
 }
 
 $(document).on("change", ".client_option", function(){
     var valArr = $(".client_option option:selected").text().split("-");
     $("#clientName").val(valArr[0]);
     $("#phone").val(valArr[1]);
     $("#address").val(valArr[2]);
     
     $("#client").append("<option>" + $(".client_option option:selected").text() + "</option>");
 });

<input id="client_name"> </input>
<input id="client_phone"> </input>
<input id="client_address"> </input>
<button type="submit" onclick="disp()">Submit</button>
<select class="client_option"><option>Please Select</option></select>

<input type="text" class="form-control" id="clientName" list="client" 
    autocomplete="off">
<datalist class="form-control client_option" id="client" hidden>
</datalist> 
<input type="tel" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" id="phone" 
       class="form-control" autocomplete="off">
<input type="text" class="form-control" id="address" autocomplete="off">



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>