javascript实现下拉选框ajax效果

深藏阁楼爱情的钟 2023-10-17 17:19 56阅读 0赞

## 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>

发表评论取消回复

表情：

评论列表（有 0 条评论，56人围观）

还没有评论，来说两句吧...

相关阅读

相关多选下拉框（select 下拉多选）

选项1</option><option value="2">选项1</option><option value="3">选项1</option><option value...

古城微笑少年丶/ 2024年05月02日 20:21/ 0 赞/ 117 阅读

相关使用下拉框，模拟单选框效果

踩坑较多，记录下来，分析坑点，填坑 **首先，数据由两个接口返回** 1、一个为选择框固定信息，以及选择框中的每个选项后面所跟的可以选填的输入框 2、一个为用...

曾经终败给现在/ 2024年04月20日 08:08/ 0 赞/ 75 阅读

相关 javascript实现下拉选框ajax效果

javascript实现下拉选框ajax效果 > 在某些情况下，jq写的select 标签 onchange事件会无效，这种情况下采用javascript编写效果

深藏阁楼爱情的钟/ 2023年10月17日 17:19/ 0 赞/ 57 阅读

相关 Android使用PopupMenu实现下拉框效果

首先在res中新建menu文件夹，新建文件menu.xml <?xml version="1.0" encoding="utf-8"?> <menu xmln

迷南。/ 2023年06月16日 01:51/ 0 赞/ 164 阅读

相关下拉复选框

最近在项目开发中，有的地方用到了下拉复选框，于是再网上找了一下，有很多种写法，但自己感觉不是很好，又不想用插件，因为感觉引入的js太大，功能太繁杂，于是决定自己写一个小demo

落日映苍穹つ/ 2023年06月05日 12:58/ 0 赞/ 193 阅读

相关 JavaWeb Ajax实现下拉框联动

博主在做项目时，需要做一个根据学期无刷新地址栏获取课程的功能，类似于地区联动选择。如图所示： 1.运行演示 ![在这里插入图片描述][20210119154723185

谁践踏了优雅/ 2023年01月08日 08:18/ 0 赞/ 185 阅读

相关 HTML复选框里添加下拉框,Html：实现带复选框的下拉框（一）

概述项目中要用到可多选的下拉框(select)，发现HTML中无此控件，故手动模拟实现一下。模拟所用元素：input，ul，li 代码模拟实现带复选框的下拉列表

朴灿烈づ我的快乐病毒、/ 2022年10月06日 12:49/ 0 赞/ 606 阅读

相关 HTML下拉框多选

HTML下拉框多选 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://

谁践踏了优雅/ 2022年08月20日 12:09/ 0 赞/ 766 阅读

相关 EasyUI实现下拉框多选

效果图： ![Center][]![Center 1][] 这个没什么说的，直接引入css和js文件和图片，调用js即可。下面是源码： <!DOCTYPE

亦凉/ 2022年06月06日 10:54/ 0 赞/ 679 阅读

相关 PyQt实现下拉式复选框

PyQt实现下拉式复选框在PyQt5下实现下拉复选框QComboCheckBox 实现方法如下： from PyQt5 import QtCore, QtG

桃扇骨/ 2022年05月17日 13:17/ 0 赞/ 1221 阅读