js css 设置自定义属性并获取（获取新增select项的属性值）

需求：

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">&nbsp;新建规则</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;
                }

            })
        }
    })