需求:
select下拉框 选择一个值时,把这个值的别的属性自动填充到页面的input中,且 select选项可以新增,
在选择新增的select选项时,经过打印 发现list中没有获取新增项。
解决方案:
通过把需要用到的每项的属性 添加到 自定义属性中,通过获取自定义属性的值来获取
代码:
css
<div class="col-md-12 form-group"> <span class="form-label"> 规则选择:</span> <select style="height: 28px;border-radius: 5px;" class="input-md selectpicker" data-live-search="true" id="ruleSeleted" name="ruleSeleted" > </select> <button type="button" class="btn btn-primary btn-sm" id="addRuleSeletedBtn"> 新建规则</button> </div> <div class="col-md-12 form-group"> <span class="form-label"> 规则编码:</span> <input type="text" class="form-control input-lg" id="ruleCode" name="ruleCode" /> </div> <div class="col-md-12 form-group"> <span class="form-label"> 规则名称:</span> <input type="text" class="form-control input-lg" id="ruleName" name="ruleName" /> </div> <div class="col-md-12 form-group"> <span class="form-label"> 规则描述:</span> <textarea class="form-area" id="ruleDesc" name="ruleDesc" data-rule="length(1~128);filter"></textarea> </div> <div class="col-md-12 form-group"> <span class="form-label"> 规则类型:</span> <input type="text" class="form-control input-lg" id="ruleType" name="ruleType" /> </div>
js
<script type="text/html" id="rule_temp">
<option value=""></option>
{{ each list item index}}
<option value="{{item.ruleId}}" data-code="{{item.ruleId}}" data-name="{{item.ruleName}}" data-state="{{item.ruleState}}" data-type="{{item.ruleType}}">{{item.ruleName}}</option>
{{/each}}
</script>
通过data-XX来设置自定义属性,并通过 **.data("XX") 来获取自定义属性的值
//规则选择 $.ajax({ "url":path + "xxxxxxxxx", "type":"POST", success:function(res){ var enentRulehtml = template('rule_temp',{ list:res }) $('#ruleSeleted').html(enentRulehtml) initEventInfo(); //使用refresh方法更新UI以匹配新状态。 $('#ruleSeleted').selectpicker('refresh'); //render方法强制重新渲染引导程序 - 选择ui。 $('#ruleSeleted').selectpicker('render'); //手动选择某个规则后 $("#ruleSeleted").bind("change",function(){ // let that = this $('#ruleCode').val($("#ruleSeleted option:selected").data("code")); $('#ruleName').val($("#ruleSeleted option:selected").data("name")); $('#ruleState').val($("#ruleSeleted option:selected").data("state")) switch ($("#ruleSeleted option:selected").data("type")){ case 0: $('#ruleType').val("全部"); break; case 1: $('#ruleType').val("单一规则"); break; case 2: $('#ruleType').val("组合规则"); break; default: $('#ruleType').val($("#ruleSeleted option:selected").data("type")); break; } }) } })