<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输入框的值
}
本人进行的是单表多层添加操作,使用了四个层级的下拉框,在次添加需要清空之前的select数据
添加完成后可以在后面把select的数据清空
$(“#change”).empty(); //清空select的值
Tip:本文为个人在需求层面设计。