• 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;
                    }
    
                })
            }
        })
  • 相关阅读:
    Filezilla账号设置多个文件夹
    VS中使用RDLC提示类型不一致
    VS批量添加多个文件
    SQLServer访问WebServices提示:SQL Server 阻止了对组件 'Ole Automation Procedures' 的 过程'sys.sp_OACreate' 的访问
    C#中Newtonsoft.Json 序列化和反序列化 时间格式
    C#注册OCX控件
    js中Tabs插件打开的标签页过多自动关闭
    web项目中使用火狐浏览器导出文件时文件名乱码
    html中table表格标题固定表数据行出现滚动条
    使用js方法将table表格中指定列指定行中相同内容的单元格进行合并操作。
  • 原文地址:https://www.cnblogs.com/lpp-11-15/p/13684905.html
Copyright © 2020-2023  润新知