0

这是在 Polymer JS 中。onchange实际上是on-change。

我有一个下拉列表，有两个项目可供选择。每个项目（商业 = 2，住宅 = 1）在应用程序的 DOM 重复部分中都有特定的字段，有些会在页面加载时预先选择默认值。例如，选择商业时，# of sites应预选为1。

当我将第一个业务类型（商业）更改为下一个业务类型时，dom-repeat 中显示的字段应该显示预选值，相反，这些字段不会显示我们在第一页加载时看到的那些预选值（默认情况下Commercial，在下拉菜单中选择业务类型的页面加载）。我的代码如下：

//业务类型（单选）和服务类型（多选）的 HTML 下拉菜单

<div class="flex-item" labelsTooltip">
  <se-singleselect title="Contract Business Type"
                   selected="{{_contract.businessTypeId}}" 
                   fieldvalue="businessTypeId"
                   fieldname="name" 
                   desc="Contract Business Type*"
                   datasrc="{{businessTypeItems}}" 
                   id="businessTypeSelect"
                   on-change="_refreshFields"
  ></se-singleselect>
</div>

<div class="flex-item labelsTooltip">
  <se-multiselect title="Service Type"
                  selected="{{_contract.serviceTypeIds}}" 
                  fieldvalue="serviceTypeId"
                  fieldname="name"
                  desc="Service Type*"
                  datasrc="{{serviceTypeItems}}"
                  id="serviceTypeSelect"
   ></se-multiselect>
</div>

//HTML dom-repeat 按服务类型，包括应根据业务类型自动填充的三个字段。

<template is="dom-repeat"
   items="{{_selectedServiceType(_contract.serviceTypeIds, serviceTypeItems, _contract.businessTypeId)}}"
   as="_serviceTypeDetails">

  <div class="labelsTooltip" id="pricingMethod" style="margin-right: 10px;">
    <se-singleselect title="Pricing Method"
                     selected="{{_serviceTypeDetails.pricingMethodId}}"
                     fieldvalue="pricingMethodId" 
                     fieldname="name"
                     desc="Pricing Method*"
                     datasrc="{{pricingMethodItems}}"
                     id="pricingMethodSelect"
    ></se-singleselect>
  </div>
  
  <div class="flex-item labelsTooltip" style="display:flex; margin: 10px 0 0 15px;">
    <div style="padding-right: 5px;">
      <label title="# of Sites" for="serviceTypeDetails.noOfSites" style="display:block;"># of Sites</label>
      <input type="text"
             value="{{_serviceTypeDetails.noOfSites::input}}"
             on-input="_allowNumbersCharsOnly" />
    </div>
    </div>
    <div class="checkmark-item chckboxes">
      <input type="checkbox"
             id="chk-start{{index}}"
             checked="{{_serviceTypeDetails.sitesStartDateAligned::change}}">
      <label title="Start Dates are Aligned" for$="chk-start{{index}}" style="font-size: small; line-height: 12px;">Start Dates are Aligned</label>
  </div>
</template>

//脚本

_selectedServiceType(val1, val2, val3) {
  var returnItems = [];
  if (val1 != undefined) {

    if (val1 == '-1') {
      for (var i = 0; i < val2.length; i++) {
        returnItems.push(val2[i]);
      }

    } else {
      var splitVal1 = val1.toString().split(',');

      for (var i = 0; i < val2.length; i++) {
        for (var j = 0; j < splitVal1.length; j++) {
          if (splitVal1[j] == val2[i].serviceTypeId) {
            returnItems.push(val2[i]);
          }
        }
      }
    }
  }

  for (const st of returnItems) {
    if (val3 == "2") {
      st.sitesStartDateAligned = true;

    }

    if (val3 == "1") {
      st.noOfSites = 1;
      st.pricingMethodId = 2;

    }

    if (this._contract.iterationId == '2' || this._contract.iterationId == '3') {
      st.pricingMethodId = 1;
    }
  }

  this.set('_contract.serviceTypeDetails', returnItems);
  return returnItems;
}
4

0 回答 0