嗷嗚~

js css 設置自定義屬性并獲取（獲取新增select項的屬性值）

Posted on 2020-09-17 14:18 嗷嗚~ 閱讀(1150) 評論(0) 收藏舉報

需求：

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;
                }

            })
        }
    })

刷新頁面返回頂部