近期在使用VFP+Layui（VFP猫框做后端接口，Layui做前端显示）开发过程中，需要用到下拉框，起初做添加信息页面，顺利实现了从后端获取数据，并实现了下拉框的自动渲染。可是在做编辑信息页面时，下拉框渲染成功了，可是无法实现自动选中已有信息。
折腾了大半天，在百度上也找了一些方法，可是还是没有实现想要的效果，郁闷啊……
功夫不负有心人，通过不断地摸索、实践、排错，终于实现了想要的效果，现记录在此，方便后期开发查询。
后台数据接口代码
DEFINE CLASS ctl_getselection as Session
&&获取年级代码
PROCEDURE getgrade
LOCAL cMsg
TEXT TO lcSQL TEXTMERGE NOSHOW PRETEXT 15
SELECT DISTINCT grade_code FROM system_term WHERE grade_code<>'9999' ORDER BY grade_code
ENDTEXT
ofrmmain.log(lcSQL)
oDBS=NEWOBJECT("MSSQLHELPER","MSSQLHELPER.PRG")
nRow=oDBS.SQLQuery(lcSQL,"grade")
IF nRow<0
TEXT TO cMsg TEXTMERGE NOSHOW PRETEXT 15
{"errno":1,"success":false,"errmsg":"查询年级信息失败","grade_code":0}
ENDTEXT
ELSE
cMsg=cursortojson("grade")
ENDIF
RETURN cMsg
ENDPROC
&&=================================================================
&&获取学生属性
PROCEDURE getxssx
LOCAL cMsg
TEXT TO lcSQL TEXTMERGE NOSHOW PRETEXT 15
SELECT xssx_code,xssx_name FROM system_xssx ORDER BY xssx_code
ENDTEXT
ofrmmain.log(lcSQL)
oDBS=NEWOBJECT("MSSQLHELPER","MSSQLHELPER.PRG")
nRow=oDBS.SQLQuery(lcSQL,"xssx")
IF nRow<0
TEXT TO cMsg TEXTMERGE NOSHOW PRETEXT 15
{"errno":1,"success":false,"errmsg":"查询学生属性信息失败","xssx_code":0,"xssx_name":""}
ENDTEXT
ELSE
cMsg=cursortojson("xssx")
ENDIF
RETURN cMsg
ENDPROC
&&=================================================================
&&获取成员关系
PROCEDURE getrelation
LOCAL cMsg
TEXT TO lcSQL TEXTMERGE NOSHOW PRETEXT 15
SELECT relation_code,relation_name FROM system_relation ORDER BY relation_code
ENDTEXT
ofrmmain.log(lcSQL)
oDBS=NEWOBJECT("MSSQLHELPER","MSSQLHELPER.PRG")
nRow=oDBS.SQLQuery(lcSQL,"relation")
IF nRow<0
TEXT TO cMsg TEXTMERGE NOSHOW PRETEXT 15
{"errno":1,"success":false,"errmsg":"查询家庭成员关系信息失败","relation_code":0,"relation_name":""}
ENDTEXT
ELSE
cMsg=cursortojson("relation")
ENDIF
*?cMsg
RETURN cMsg
ENDPROC
ENDDEFINE以获取成员关系为例，后端返回的数据信息为：
{
"total": 9,
"count": 9,
"rows": [
{ "relation_code": 1,
"relation_name": "父亲" },
{ "relation_code": 2,
"relation_name": "母亲" },
{ "relation_code": 3,
"relation_name": "祖父" },
{ "relation_code": 4,
"relation_name": "祖母" },
{ "relation_code": 5,
"relation_name": "外祖父" },
{ "relation_code": 6,
"relation_name": "外祖母" },
{ "relation_code": 7,
"relation_name": "哥哥" },
{ "relation_code": 8,
"relation_name": "姐姐" },
{ "relation_code": 9,
"relation_name": "其他" }
],
"errno": 0,
"errmsg": "ok",
"code": 0
}前端JS函数
layui.define(['jquery','form', 'layer','apiurl'], function (exports) {
let $ = layui.jquery;
let form = layui.form;
let apiurl = layui.apiurl;
//添加学生信息页面获取年级信息
$.ajax({
url:apiurl.url+'ctl_getselection.fsp?proc=getgrade',
type:'get',
success:function (data,status)
{
var datas=JSON.parse(data);
//将数据转换为 JavaScript 对象
//console.log("getgrade")
//console.log(datas);
$.each(datas.rows, function (index, item) {
//console.log("getgrade")
// console.log(item);
$('#njdm').append(new Option(item.grade_code+'级',item.grade_code));// 下拉选择框里添加元素，前面为option name，后面为option value
$('#xjnj').append(new Option(item.grade_code+'级',item.grade_code));// 下拉选择框里添加元素，前面为option name，后面为option value
});
layui.form.render("select");//重新渲染 固定写法
}
});
//添加学生信息页面获取学生属性信息
$.ajax({
url:apiurl.url+'ctl_getselection.fsp?proc=getxssx',
type:'get',
success:function (data,status)
{
var datas=JSON.parse(data);
//将数据转换为 JavaScript 对象
//console.log("getgrade")
//console.log(datas);
$.each(datas.rows, function (index, item) {
//console.log("getgrade")
// console.log(item);
$('#xssx').append(new Option(item.xssx_name,item.xssx_name));// 下拉选择框里添加元素，前面为option name，后面为option value
});
layui.form.render("select");//重新渲染 固定写法
}
});
//获取家庭关系信息，此部分已废弃，使用下面的自定义函数
// $.ajax({
// url:apiurl.url+'ctl_getselection.fsp?proc=getrelation',
// type:'get',
// success:function (data,status)
// {
// var datas=JSON.parse(data);
// //将数据转换为 JavaScript 对象
// //console.log("getgrade")
// //console.log(datas);
// $.each(datas.rows, function (index, item) {
// //console.log(item);
// $('#jtcygx1').append(new Option(item.relation_name,item.relation_name));// 下拉选择框里添加元素，前面为option name，后面为option value
// $('#jtcygx2').append(new Option(item.relation_name,item.relation_name));// 下拉选择框里添加元素，前面为option name，后面为option value
// });
// layui.form.render("select");//重新渲染 固定写法
// }
// });
//家庭成员关系下拉框获取与选中，参数1为家庭成员关系1下拉框的值，参数2为家庭成员关系2下拉框的值
//如果仅是添加信息页面，两个参数可以设置为空，如果是编辑页面，需要从后台获取返回的数据并传入进来。
window.jtcygx = function (jtcy1,jtcy2) {
$.ajax({
url:apiurl.url+'ctl_getselection.fsp?proc=getrelation',
dtatType:'json',
type:'get',
async:true,
success:function(data,status){
//第一个添加的为选中值
console.log(data)
relation=JSON.parse(data);
//console.log('jtcy1:',jtcy1,'jtcy2:',jtcy2)
$('#jtcygx1').append(new Option(jtcy1,jtcy1));
$('#jtcygx2').append(new Option(jtcy2,jtcy2));
$.each(relation.rows,function(index,item){
//console.log(item,item.relation_name);
if(item.relation_name!=jtcy1){
$('#jtcygx1').append(new Option(item.relation_name,item.relation_name));//继续往下拉菜单里添加元素
};//if end
if(item.relation_name!=jtcy2){
$('#jtcygx2').append(new Option(item.relation_name,item.relation_name));//继续往下拉菜单里添加元素
};//if end
})//each end
form.render('select');//这个一定要有
}//success end
});//window.jtcygx ajax end
}//window.jtcygx end
})前端调用JS函数
<div>
<label>成员关系</label>
<div>
<!--<select name="jtcygx1" id="jtcygx1" lay-verify="required" lay-reqtext="请选择家庭成员关系"><option value=""></option>
</select>-->
<select name="jtcygx1" id="jtcygx1" lay-verify="required" lay-reqtext="请选择家庭成员关系"></select>
</div>
</div>
<div>
<label>成员关系</label>
<div>
<!--<select name="jtcygx2" id="jtcygx2" lay-verify="required" lay-reqtext="请选择家庭成员关系"><option value=""></option>
</select>-->
<select name="jtcygx2" id="jtcygx2" lay-verify="required" lay-reqtext="请选择家庭成员关系"></select>
</div>
</div>
</form>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script src="../../component/extra/selection.js"></script>
<script src="../../component/extra/check_token.js"></script>
<script>
layui.use(['form', 'jquery','apiurl'], function() {
let form = layui.form;
let $ = layui.jquery;
let apiurl =layui.apiurl;
var sessionsdata = layui.sessionData('logininfo');
var token=sessionsdata.data.token;
var userid=sessionsdata.data.userid;
var userrole=sessionsdata.data.userrole;
var username=sessionsdata.data.username;
//console.log("===========16540561515105");
//console.log(token);
var gx1="";
var gx2="";
//加载页面后获取后台数据，并自动添加到表格中
$.ajax({
url:apiurl.url+'ctl_studentinfo.fsp?proc=getstudentinfo',
async:false,//是否使用异步请求。默认为true。
data: JSON.stringify({token: token, userid:userid,username:username,userrole:userrole}),
dataType: 'json',
contentType: 'application/json',
type: 'post',
success: function(res) {
stu=res.rows;
gx1=stu[0]["stu_jtlxrgx1"];
gx2=stu[0]["stu_jtlxrgx2"];
//此处两个变量必须要从后台取值，否则为空，下拉列表将无法选中
console.log(res);
if (res.total == 1){
//$('#xssx').val(stu[0]["stu_xssx"]);//需要注意此处json数据的取值方式
form.val('edit_student', {
"xssx": stu[0]["stu_xssx"],//需要注意此处json数据的取值方式
"njdm": stu[0]["stu_grade_code"]+"级",
"bjh": stu[0]["stu_class_no"]+"班",
"xsxm": stu[0]["stu_xm"],
"sex": stu[0]["stu_xb"],
"sfzh": stu[0]["stu_sfzh"],
"gwxjh": stu[0]["stu_gwxjh"],
"xjxx": stu[0]["stu_xjxx"],
"xjnj": stu[0]["stu_xjnj"],
"jtdz": stu[0]["stu_jtdz"],
"jtcygx1": stu[0]["stu_jtlxrgx1"],
"jtlxr1": stu[0]["stu_jtlxr1"],
"phone1": stu[0]["stu_jtlxrlxdh1"],
"jtcygx2": stu[0]["stu_jtlxrgx2"],
"jtlxr2": stu[0]["stu_jtlxr2"],
"phone2": stu[0]["stu_jtlxrlxdh2"],
});
form.render();
}//if end
else{
alert (res.errmsg);
location.href="../login.html";
}//else end
}//success end
});//ajax end
//加载家庭成员关系下拉框，并自动选中，需要两个参数，否则会出错
window.jtcygx(gx1,gx2);
form.on('submit(user-save)', function(data) {
//console.log(data);
data.field.token=token;
data.field.userid=userid;
data.field.username=username;
data.field.userrole=userrole;
console.log(data)
$.ajax({
url: apiurl.url+"ctl_studentinfo.fsp?proc=editsave",
async:false,//是否使用异步请求。默认为true。
data: JSON.stringify(data.field),
dataType: 'json',
contentType: 'application/json',
type: 'post',
success: function(result) {
console.log(result);
if (result.errno == 0) {
// 添加成功用msg，这是ctl_add_student.prg中自定义的
layer.msg(result.msg, {
icon: 1,
time: 3000
},function(){
location.reload();//添加成功后刷新添加页面
});
} else {//添加失败，返回消息用errmsg，这是猫框中默认的
layer.msg(result.errmsg, {
icon: 2,
time: 5000
});
}
}
})
return false;
});
})
</script>
</body>
</html>
最新回复