select单选框在选择时候赋初值 html

一.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);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值