javascript - 使用 Jquery 将项目填充到 SELECT 中

Question

我在使用 jquery 填充 SELECT 时遇到问题，当用户写入邮政编码或其中的一部分时，它会搜索数据库并返回:

{"success":1,"id":"50","street":"Central One"},{"success":1,"id":"60","street":"Central Two"}

它找到的每条街道一次成功。对于单条街道并使用文本输入，我正在使用这个

更新 1 - 完整代码

$(document).ready( function() {
 $('#zip').blur(function(){
       $.ajax({
            url : '../../controller/zip.php', 
            type : 'POST', 
            data: 'zip=' + $('#zip').val(), 
            dataType: 'json', 
            success: function(data){
                if(data.sucesso == 1){
                    $('#id').val(data.id);
                    $('#street').val(data.street);
                }
            }
       });   
return false;    
})
}); 

我如何更改它以便填充选择框。

谢谢

Answer 1

为单个地址传回的是单个对象，您可以从中获取信息。当有多个响应时，您需要遍历每个响应并进行处理。

当我们查看 MDN's article 时它表明我们需要一个 parent <select>标记然后我们需要填充 child 。这个过程看起来像这样:

• 查找/创建父级选择
• [可选] 删除以前的 child <option>标签
• 循环响应
  • 创建一个新的 <option>元素
  • 填充 <option>具有适当的值(value)和内容
  • 将其附加到父级 <select>

有些事情需要注意，如果您每次从数据库获得响应时都清除以前的地址，您将需要删除这些以前的 <option>秒。这可以通过 .empty() 来完成如果 parent 中没有其他 child 或从 parent 开始<select>并删除所有 child <options> .