使用ajax从数据库动态加载下拉框(select)数据，可编辑下拉框。

本文链接：https://blog.csdn.net/x2570799116/article/details/68205162

<div style="position:relative;">
    <span style="margin-left:100px;width:18px;overflow:hidden;">
    <select id="change" name="property" style="width:118px;margin-left:-100px" onchange="this.parentNode.nextSibling.value=this.value">
    </select></span><input name="box" style="width:100px;position:absolute;left:0px;">
</div>

在加载select前的方法中从后台读取数据，并给select 赋予option值。

//这个方法需要在显示select之前调用。
function getModelList3(){  ----一个的select框(第一级的框)
        var pid = $("#categoryId").val();
        console.log(pid);
        $("select[name=property]").empty();     //清空seletct的数据  
        $.ajax({
            type:"POST",                        //post请求
            url:"url",                          //请求后台action 根据需求请求自己的后台数据
            data:{"pid":pid},                   //传到后台的参数，后台需要编写get和set方法且和返回数据名相同。
            dataType:"json",                    //预期服务器返回的数据类型
            error:function(){                   //ajax错误的方法
            },   
            success:function(data){             //ajax成功的方法 在里卖弄给select的<option>标签赋值
                //向select中append、option标签
                var optionString = "<option grade=\'请选择一级属性\' selected = \'selected\'>--请选择一级属性--</option>";
                var beanList = data;            //返回的json数据
                if(beanList){                   //判断
                    for(var i=0; i<beanList.length; i++){ //遍历，动态赋值
                        optionString +="<option grade=\""+beanList[i].id+"\" value=\""+beanList[i].id+"\"";  
                        optionString += ">"+beanList[i].name+"</option>";  //动态添加数据  
                    }  $("select[name=property]").append(optionString);  // 为当前name为asd的select添加数据。
                }  
            }  
        });  
    }

在前面select的onchange属性，表示在切换下拉框值得时候调用的方法，上面表示的是，给select上面的input赋值（为了实现可编辑的下拉框）。

可修改成：

onchange="this.parentNode.nextSibling.value=this.value;gradeChange()"

这里的gradeChange()方法写在js里面，实现在点击完成后可以得到当前选中的值：

$("#change").find("option:selected").text();//得到当前选中的值

我在option标签中添加了grade属性，用来体现name所对应的id值，其实可以直接用value查看id值

function gradeChange(){
        var objS = document.getElementById("change");
        var grade = objS.options[objS.selectedIndex].getAttribute('grade');//这里要是把grade换成value也是一样的。
        $("#shuxingadd4").css("display","none");
        //取到select的值
        $("#change").find("option:selected").text();//取select的值
        $("#box").val();//取input输入框的值
    }