Question

我想将一个用户列表放在从MySQL数据中获取的下拉菜单中。在菜单上选择用户后，我希望所有文本框的值随MySQL表中该用户的值动态变化。

Answer 1

以下是基于下拉列表选择填充元素的简单示例。我猜到了你的数据格式，但希望这会帮助你走上正确的轨道。

HTML

<select id="userDropdown"></select>

<label>Name</label>
<input type="text" id="name" />

<label>Phone</label>
<input type="text" id="phone" />

的Javascript

//sql data...
var data = [
    {username: 'User 1', name: 'Bill', phone: '123-456-789'},
    {username: 'User 2', name: 'John', phone: '123-456-987'},
    {username: 'User 3', name: 'Steve', phone: '123-654-789'}
];

var dropdown = $('#userDropdown');
dropdown.append('<option value="" >Select User</option>');
for(var i = 0; i < data.length; i++){
    var item = data[i];
    dropdown.append('<option value="' + item.username + '" >' + item.username + '</option>');
}

$('#userDropdown').change(function(){
    var user = this.value;
    var dataItem = $.grep(data, function(e){ return e.username == user; });

    if(dataItem.length > 0){
        $('#phone').val(dataItem[0].phone);
        $('#name').val(dataItem[0].name);
    }
});

https://jsfiddle.net/c2npt05o/

Answer 2

您可以使用jquery / ajax。这是一个例子。你应该可以在这里工作：

<!--html-->
<select id='name_select'>
        <option value ="john">John</option>
</select>
<input id='name'> 
<script>
     $('name_select').change(function(){
         var name = $('name_select option:selected').val(); //john for example if selected
         $.ajax({
              'url':'/path_to_php',
              'type': 'GET', //or Method: GET, depending you on jquery verion
               'succes': function(returned_data) //php gave a name back
                {
                     $('#name').attr('value',returned_data); // adds 'value' tag to input containing whatever returned data has
               )}
          })
</script>

更改下拉菜单的值时更改文本输入值

2 个答案: