javascript实现下拉选框ajax效果

最新推荐文章于 2021-08-05 14:01:09 发布

qq_16570607

最新推荐文章于 2021-08-05 14:01:09 发布

阅读量418

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ajax

本文链接：https://blog.youkuaiyun.com/qq_16570607/article/details/78708110

本文介绍如何使用纯JavaScript实现下拉选框的AJAX效果。针对jQuery可能存在的兼容性问题，提供了一种替代方案，通过GET请求更新页面元素。示例中包括了创建XMLHttpRequest对象的方法及响应状态的处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

javascript实现下拉选框ajax效果

在某些情况下，jq写的select 标签 onchange事件会无效，这种情况下采用javascript编写效果

<script type="text/javascript">
//ajax函数--get方法传输
    function ajax(url, fnSucc){
        if(window.XMLHttpRequest)
           {
               var oAjax = new XMLHttpRequest();
           }
           else
           {
               var oAjax = new ActiveXObject("Microsoft.XMLHTTP");//IE6浏览器创建ajax对象
           }
           oAjax.open("GET",url,true);//把要读取的参数的传过来。
           oAjax.send();
           oAjax.onreadystatechange=function()
           {
               if(oAjax.readyState==4)
               {
                   if(oAjax.status==200)
                   {
                       fnSucc(oAjax.responseText);//成功的时候调用这个方法
                   }
                   else
                   {
                    //todo somethining..
                    alert("fail");
                   }
               }
           };
    }

    function changePid(obj){
        var opt = obj.options[obj.selectedIndex];
        var pid = opt.value;
        if(pid==null||pid==""){
            document.getElementById("subjectId").value = subjectIdValue;
            document.getElementById("direction").value = directionValue;
            document.getElementById("finalSwap").value = finalSwapValue;
            return;
        }
        //url改成你的服务器接口地址
        var url = "${ctx}/budget/financeAllSubject/single?subjectId=" + pid;
        //调用ajax函数
        ajax(url,function(str){
            var obj = eval('(' + str + ')');
            document.getElementById("subjectId").value = obj.subjectId;
            document.getElementById("direction").value = obj.direction;
            document.getElementById("finalSwap").value = obj.finalSwap;
        });
    }
</script>

<body>
    //设置onchange事件
    <select id="pid" name="pid" onchange="changePid(this)" class="form-control required">
        <option value="">---请选择父级科目代码---</option>
    </select>
</body>