ajax获取下拉菜单

<td>联系地址:</td>
<td colspan="2">
   <div class="col-xs-2">
       <select οnchange="get_city(this)" id="province" name="province" class="form-control" style="margin-left:-15px;">
           <option  value="0">选择省份</option>
           <volist name="province" id="vo">
               <option value="{$vo.id}" <if condition="$config[province] eq $vo[id]">selected</if>>{$vo.name}</option>
           </volist>

</select>

//jquery代码

function get_province(){
    var url = '/index.php?m=Admin&c=Api&a=getRegion&level=1&parent_id=0';
    $.ajax({
        type : "GET",
        url  : url,
        error: function(request) {
            alert("服务器繁忙, 请联系管理员!");
            return;
        },
        success: function(v) {
            v = '<option value="0">选择省份</option>'+ v;
            $('#province').empty().html(v);
        }
    });
}

============================================================================

开始时,在html页面的下拉选项中给一个

<option  value="0">选择省份</option>
,然后再在js代码中,ajax获取时候在给一个<option  value="0">选择省份</option>,然后拼接上ajax请求过来的,组成新的组合,然后在用
jQuery中让原本的html代码的下拉选框部分清空(empty()的作用),然后再整体填充

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
下拉菜单是网页中常见的交互元素之一,可以让用户方便地选择所需的选项。使用 Ajax 技术实现下拉菜单可以在不刷新整个页面的情况下动态加载数据和更新页面内容,提高用户体验。 下面是一个简单的示例,演示如何使用 Ajax 技术实现下拉菜单: HTML 代码: ``` <select id="select1"> <option value="">请选择</option> <option value="1">选项1</option> <option value="2">选项2</option> <option value="3">选项3</option> </select> <select id="select2"> <option value="">请选择</option> </select> ``` JS 代码: ``` // 获取第一个下拉菜单 var select1 = document.getElementById("select1"); // 监听 select1 的 change 事件,当选项改变时触发 select1.addEventListener("change", function() { // 获取选中的值 var selectedValue = select1.value; // 如果选中的值为空,则清空第二个下拉菜单 if (selectedValue === "") { document.getElementById("select2").innerHTML = "<option value=''>请选择</option>"; return; } // 发送 Ajax 请求获取第二个下拉菜单的选项 var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { // 解析服务器返回的数据 var options = JSON.parse(xhr.responseText); // 构建第二个下拉菜单的选项 var html = "<option value=''>请选择</option>"; options.forEach(function(option) { html += "<option value='" + option.value + "'>" + option.label + "</option>"; }); // 更新第二个下拉菜单 document.getElementById("select2").innerHTML = html; } }; xhr.open("GET", "getOptions.php?selectedValue=" + selectedValue); xhr.send(); }); ``` 在上面的代码中,我们首先获取了第一个下拉菜单,并监听其 change 事件。当用户选择了一个选项时,我们获取其选中的值,并发送 Ajax 请求到服务器端获取第二个下拉菜单的选项。服务器端可以使用 PHP 等语言处理请求,并返回一个 JSON 数据,其中包含了第二个下拉菜单的选项。在客户端收到服务器返回的数据后,我们解析 JSON 数据,构建第二个下拉菜单的选项,并更新页面内容。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值