jQuery实现动态加载select下拉列表项功能示例

下面我会详细讲解“jQuery实现动态加载select下拉列表项功能”的完整攻略。

1. 动态加载select下拉列表项的原理

动态加载select下拉列表项的原理是使用jQuery的ajax方法，从服务器获取数据，然后将数据填充到select中。

2. 实现动态加载select下拉列表项的步骤

实现动态加载select下拉列表项的步骤如下：

1. 发送ajax请求，从服务器获取数据；
2. 将数据解析成HTML字符串；
3. 将HTML字符串插入到select中。

下面就是两个示例说明：

示例一

HTML代码：

<select id="fruit"></select>

JavaScript代码：

// 发送ajax请求
$.ajax({
    url: 'data.php',
    type: 'get',
    dataType: 'json',
    success: function(data) {
        // 将数据解析成HTML字符串
        var html = '';
        for(var i=0; i<data.length; i++) {
            html += '<option value="' + data[i].id + '">' + data[i].name + '</option>';
        }
        // 将HTML字符串插入到select中
        $('#fruit').html(html);
    }
});

示例二

HTML代码：

<select id="city"></select>

JavaScript代码：

// 发送ajax请求
$.ajax({
    url: 'data.php',
    type: 'get',
    dataType: 'json',
    success: function(data) {
        // 将数据解析成HTML字符串
        var html = '';
        for(var i=0; i<data.length; i++) {
            html += '<optgroup label="' + data[i].province + '">';
            for(var j=0; j<data[i].cityList.length; j++) {
                html += '<option value="' + data[i].cityList[j].id + '">' + data[i].cityList[j].name + '</option>';
            }
            html += '</optgroup>';
        }
        // 将HTML字符串插入到select中
        $('#city').html(html);
    }
});

以上就是两个示例说明。其中示例一是从服务器获取水果列表并填充到select中，示例二是从服务器获取省市列表并填充到select中。