一.select单选框中选择有初始值
描述:在写需求碰到在修改页面的时候会首先就显示原数据的信息,然后select里面应该是显示原数据的信息的基础下会有从接口获取的其他下拉选项
如图所示:
“–”是修改页面的原数据 ,土豆和蓝莓是接口获取的数据
业务逻辑:首先要根据model里面的数据判断赋予初始值
再根据接口获取的ID和获取的数组的ID进行匹配,增加html的option选项
并且option选项中不得出现本次渲染的数据
代码:
html:
<span id="lineTitle">-</span>
<select class="inputStyle" id="deviceType">
</select>
jquery:
//判断数组里面的数据是否为空 给选择框初始值
if (model.Name == null) {
var item = "<option value=''>--</option>";
} else {
item = "<option value=''>"+model.Name+"</option>"}
//根据Id匹配数组中的数据
//如果data里面的Id有原本本身的id就不渲染 避免出现重复项
for (var i = 0; i < data.length; i++) {
if (data[i].Id == parseInt(model.Id)) {item += "";}
else {
item += "<option value='" + data[i].Id + "' id='devOption'>" + data[i].Name + "</option>"; } }
$("#deviceType").html(item);