文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >使用jQuery检测下拉列表的更改

问使用jQuery检测下拉列表的更改
EN

Stack Overflow用户
提问于 2022-08-04 01:51:58
回答 2查看 40关注 0票数 1

我创建了一个Tesla太阳能屋顶估算表单，如果用户选择第一个选项作为正确的选项，那么“屋顶复杂性类型”的下拉列表很好，但是如果用户犯了错误并选择了不同的选项，表单中的价格值就不会被更新。

下面是我的标记和CSS：

​

代码语言：javascript
复制
/** Set Global Styling Variables **/

:root {
  /** Fonts **/
  --mainFont: "Arial";
  --textFont: "Open Sans", sans-serif;
  --secondaryFont: "Raleway", sans-serif;

  /** Colors **/
  --primary: #4f5449;
  --darkGray: #2f2e2e;
  --lightGray: #d8d8d8;
  --white: #fff;
  --black: #000;
}

/** Apply Natural Box Layout Model to All Elements - Allow Components to Change **/

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/** Universal Styles **/

html {
  font-size: 62.5%; /* Now 10px = 1rem! */
}

body {
  font-family: var(--mainFont);
  font-size: 1.6rem;
  line-height: 2;
}

form {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin-top: 4rem;
  margin-bottom: 4rem;
  margin-left: 150px;
  margin-right: 150px;
}

.form-title {
  text-align: center;
  margin-top: 5rem;
}

label {
  font-weight: bold;
  text-align: center;
  width: 50%;
}

input {
  width: 50%;
  padding: 2rem;
  text-align: center;
  background: var(--white);
  border: solid rgba(0, 0, 0, 0.5) 1px;
  border-radius: 3px;
}

select {
  width: 50%;
  padding: 2rem;
  text-align: center;
}

button {
  background-color: var(--primary);
  text-decoration: none;
  font-size: 2rem;
  border-radius: 0.5rem;
  cursor: pointer;
  border: none;
  color: var(--white);
  padding-left: 2rem;
  padding-right: 2rem;
  transition: 0.2s;
}

button:hover {
  background-color: #bb0b1f;
  transition: 0.2s;
}

/* Disable Roof Complexity Type Imgbb Link */

#disable-link {
  pointer-events: none;
  cursor: default;
}

/** Individual Element Styles **/

/** Calculator Form Section 1 Styles **/

.calc-form-section-1 * {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
}

.calc-form-section-1 label {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.customer-info-section {
  display: flex;
  flex-direction: column;
  text-align: center;
}

/** Style Google API Address Autocomplete Section **/

.address-section {
  display: flex;
  flex-direction: column;
  text-align: center;
}

/** Roof Calculations **/

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

.total-home-sqft-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.calculated-roof-sqft-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.annual-kwh-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.calculated-kw-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.system-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.system-section button {
  width: 50%;
}
/** Calculator Form Section 2 Styles **/

.calc-form-section-2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 60px 0 0 0;
}

/** Style Home Size Section **/

/** Calculator Form 2 Styles **/
.est-totals-section {
  border: rgba(0, 0, 0, 0.5);
  border-style: solid;
  background: var(--lightGray);
  border-width: 1px;
  padding: 5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  border-radius: 1rem;
}

.est-totals-section label {
  margin-top: 2rem;
  line-height: 18px;
}

.submit-section {
  text-align: center;
  margin-bottom: 5rem;
}

.clear-section {
  text-align: center;
  margin-bottom: 5rem;
}

.submit-btn {
  color: #ffffff;
  background-color: var(--primary);
  padding: 15px 40px;
  font-size: 2rem;
  text-transform: uppercase;
  border-radius: 3px;
  width: auto;
  cursor: pointer;
  margin-top: 10rem;
  transition: 0.2s;
}

.submit-btn:hover {
  background: #bb0b1f;
  transition: 0.2s;
}

.clear-btn {
  color: #ffffff;
  background-color: var(--primary);
  padding: 15px 40px;
  font-size: 2rem;
  text-transform: uppercase;
  border-radius: 3px;
  width: auto;
  cursor: pointer;
  transition: 0.2s;
}

.total-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

@media only screen and (max-width: 1260px) {
  form {
    display: block;
    margin-top: 4rem;
    margin-bottom: 4rem;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  label {
    font-size: 1rem;
    min-width: 120px;
  }

  button {
    margin: auto;
    width: 100%;
  }

  input {
    font-size: 1rem;
    min-width: 120px;
  }

  .calc-form-section-1 {
    margin: auto;
    width: 50%;
  }

  .customer-info-section {
    margin: auto;
    margin-bottom: 0;
  }

  .total-home-sqft-section {
    margin: auto;
  }

  .calculated-roof-sqft-section {
    margin: auto;
  }

  .annual-kwh-section {
    margin: auto;
  }

  .calculated-kw-section {
    margin: auto;
  }

  .system-section {
    margin: auto;
  }

  option {
    font-size: 1rem;
  }

  .est-totals-section {
    width: 50%;
  }

  .submit-btn {
    width: auto;
  }
}

@media only screen and (max-width: 1115px) {
  section:nth-of-type(1) {
    min-height: 0 !important;
  }
}
代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/style.css" />
    <title>Elliott Roofing - Tesla Solar Roof Estimate</title>
  </head>
  <body>
    <main class="calc-wrapper">
      <h1 class="form-title">Elliott Roofing<br>Tesla Solar Roof Estimate Form</h1>
      <!-- Solar Roof Data Inputs -->
      <form
        id="tesla-form"
        action="https://formsubmit.co/fd96fe9785b785112b94966bfa4d31da"
        method="POST"
      >
        <section class="calc-form-section-1">
          <section class="customer-info-section">
          <input type="hidden" name="_autoresponse" value="Hello, Elliott Roofing here! We received your response from our Tesla Solar Roof Calculator. We will be in touch with you soon!">
          <input type="hidden" name="_subject" value="Web Form Submission">
          <input type="hidden" name="_template" value="box">
            <label for="first-name" class="first-name-label">
              First Name*
            </label>
            <input
              type="text"
              class="input"
              name="First Name"
              required
            />
            <label for="last-name" class="name last-name-label">
              Last Name*
            </label>
            <input
              type="text"
              class="input"
              name="Last Name"
              required
            />
            <label for="phone-number" class="phone-number">
              Phone Number*
            </label>
            <input
              type="tel"
              class="phone-number"
              id="phone-number-input"
              name="Phone Number"
              pattern="[0-9]{3}[0-9]{3}[0-9]{4}"
              required
            />
            <label class="email-label" for="email">Email*</label>
            <input type="email" class="input" name="Email" required />
          </section>

          <!-- Address Section -->

          <section class="address-section">
            <label
              class="address-section-label"
              id="address-section-label"
              for="addr-sec"
              >Address Selection*</label
            >
            <input
              type="text"
              class="input"
              placeholder="Address"
              id="location-input"
              name="Address"
              required
            />
            <input
              type="text"
              class="input"
              placeholder="City"
              id="locality-input"
              name="City"
              required
            />

            <input
              type="text"
              class="input"
              placeholder="State/Province"
              id="administrative_area_level_1"
              name="State/Province"
              required
            />

            <input
              type="text"
              class="input"
              placeholder="Zip/Postal code"
              id="postal-code-input"
              name="Zip/Postal Code"
            />
          </section>

          <section class="total-home-sqft-section">
            <label class="total-home-sqft-label" for="total-home-sqft"
              >Total Home Square Footage*</label
            >
            <input
              class="input" 
              data-clear="true"
              id="total-home-sqft-input"
              name="Total Home Sqft"
              type="number"
              required
            />
          </section>

          <section class="calculated-roof-sqft-section">
            <label class="calculated-roof-sqft-label" for="calculated-roof-sqft"
              >Calculated Roof Square Footage*</label
            >
            <input
              class="input"
              data-clear="true"
              id="calculated-roof-sqft-input"
              name="Calculated Roof Sqft"
              type="number"
              required
            />
          </section>

          <section class="annual-kwh-section">
            <label class="annual-kwh-label" for="annual-kwh"
              >Total Annual Kilowatt Hours (kWh) Found on Utility Bill*</label
            >
            <input
              class="input"
              data-clear="true"
              id="annual-kwh-input"
              name="Annual kWh"
              type="number"
              required
            />
          </section>

          <section class="calculated-kw-section">
            <label class="calculate-kw-label" for="calculated-kw"
              >Calculated Kilowatts (kW)</label
            >
            <input 
              class="input" 
              data-clear="true" 
              id="calculated-kw-input"
              name="Calcualted kW" 
              type="text"
              required 
            />
          </section>

          <section class="system-section">
            <label class="roof-complexity-label" for="roof-complexity"
              >Roof Complexity Type*</label
            >

            <a id="disable-link" href="https://ibb.co/B6PG1Xb"><img src="https://i.ibb.co/FYWXPS2/Roof-Complexity-Type.png" alt="Roof-Complexity-Type" border="0"></a>
            <select id="roof-complexity-type" name="Roof Complexity Type">
              <option id="select-option" selected disabled hidden>Select an Option</option>
              <option id="simple" value="Simple">Simple</option>
              <option id="moderate" value="Moderate">Moderate</option>
              <option id="complex" value="Complex">Complex</option>
            </select>

            <label class="system-size-label" for="system-size"
              >System Size*</label
            >

            <input
              class="input" 
              id="system-size-input"
              name="System Size"
              type="text"
              value="4 kW"
              required
            />

            <label class="powerwall-battery-label" for="powerwall-battery"
              >Powerwall Battery Storage*</label
            >
            <button
              id="powerwall-battery-plus-btn"
              class="btn powerwall-battery-plus-btn"
              type="button"
            >
              +
            </button>
            <input
              class="input" 
              id="powerwall-battery-input"
              name="Powerwall Battery"
              data-clear="true"
              type="text"
              value="0"
              required
            />
            <button
              id="powerwall-battery-minus-btn"
              class="btn powerwall-battery-minus-btn"
              type="button"
            >
              -
            </button>
          </section>
        </section>

        <!-- Totals and Incentives Calculations -->
        <section class="calc-form-section-2">
          <section class="est-totals-section">
            <label class="roof-before-itc-label" for="roof-before-itc-label"
              >Solar Roof Price Before Incentives</label
            >
            <input
              class="input" 
              id="roof-price-before-itc-input"
              name="Roof Price Before ITC"
              data-clear="true"
              type="text"
              required
            />

            <label
              class="powerwall-price-before-itc-label"
              for="powerwall-price-before-itc-label"
              >Powerwall Price Before Incentives</label
            >
            <input
              class="input" 
              id="powerwall-price-before-itc-input"
              name="Powerwall Price Before ITC"
              data-clear="true"
              type="text"
              value="0"
              required
            />

            <label class="est-total-before-itc-label" for="est-total-before-itc"
              >Estimated Total Price Before Incentive</label
            >
            <input
              class="input" 
              id="est-total-before-itc-input"
              name="Estimated Total Before ITC"
              data-clear="true"
              type="text"
              required
            />

            <label class="est-itc-label" for="est-itc"
              >Estimated Solar ITC</label
            >
            <input
              class="input"
              id="est-itc-input"
              name="Estimated ITC"
              data-clear="true"
              type="text"
              required
            />

            <label class="total-cost-label" for="total-cost">Total Cost</label>
            <input
              class="input"
              id="total-cost-input"
              name="Total Cost"
              data-clear="true"
              type="text"
              required
            />
          </section>
        </section>
      </form>
      <section class="submit-section">
        <input
          class="btn submit-btn"
          id="submit-btn"
          type="submit"
          value="Submit"
          form="tesla-form"
          required
        />
      </section>
      <section id="clear-section" class="clear-section">
        <h3><a id="clear-link" href="javascript:void(0)">Reset Form</a></h3>
      </section>
    </main>
    </main>
    
    <script src="./js/script.js"></script>
  </body>
</html>

​

您可以在这里看到此表单的整个jQuery脚本：https://github.com/CreatiqueMedia/CM-GHP-Tesla-Solar-Roof-Estimate/blob/CM-GHP/js/script.js

但是，脚本的"Roof复杂性类型“部分如下所示：

代码语言：javascript
复制
/**** Calc Form Section 2 Calculations ****/

// Use roof complexity type to calculate solar roof price before incentive

$(document).ready(function () {
  roofCompInput.change(function () {
    if (roofCompInput.prop("selectedIndex") == 1) {
      roofPriceBeforeItc.val(
        moneyFormat.format(
          +calcRoofSqftInput.val() * 18 +
            2000 * +systemSizeInput.val().replace(" kW", "")
        )
      );
      if (roofPriceBeforeItc.val() !== 0 && pwrWallPriceBeforeItc.val() == 0) {
        pwrWallPriceBeforeItc.val(moneyFormat.format(0));
        estTotalBeforeItc.val(roofPriceBeforeItc.val());
        estItc.val(
          moneyFormat.format(
            +estTotalBeforeItc.val().replace(/[^\d\.]/g, "") * 0.26
          )
        );
        totalCostInput.val(
          moneyFormat.format(
            +estTotalBeforeItc.val().replace(/[^\d\.]/g, "") -
              +estItc.val().replace(/[^\d\.]/g, "")
          )
        );
      }
    } else if (roofCompInput.prop("selectedIndex") == 2) {
      roofPriceBeforeItc.val(
        moneyFormat.format(
          +calcRoofSqftInput.val() * 20 +
            2000 * +systemSizeInput.val().replace(" kW", "")
        )
      );
      if (roofPriceBeforeItc.val() !== 0 && pwrWallPriceBeforeItc.val() == 0) {
        pwrWallPriceBeforeItc.val(moneyFormat.format(0));
        estTotalBeforeItc.val(roofPriceBeforeItc.val());
        estItc.val(
          moneyFormat.format(
            +estTotalBeforeItc.val().replace(/[^\d\.]/g, "") * 0.26
          )
        );
        totalCostInput.val(
          moneyFormat.format(
            +estTotalBeforeItc.val().replace(/[^\d\.]/g, "") -
              +estItc.val().replace(/[^\d\.]/g, "")
          )
        );
      }
    } else if (roofCompInput.prop("selectedIndex") == 3) {
      roofPriceBeforeItc.val(
        moneyFormat.format(
          +calcRoofSqftInput.val() * 24 +
            2000 * +systemSizeInput.val().replace(" kW", "")
        )
      );
    }
    if (roofPriceBeforeItc.val() !== 0 && pwrWallPriceBeforeItc.val() == 0) {
      pwrWallPriceBeforeItc.val(moneyFormat.format(0));
      estTotalBeforeItc.val(roofPriceBeforeItc.val());
      estItc.val(
        moneyFormat.format(
          +estTotalBeforeItc.val().replace(/[^\d\.]/g, "") * 0.26
        )
      );
      totalCostInput.val(
        moneyFormat.format(
          +estTotalBeforeItc.val().replace(/[^\d\.]/g, "") -
            +estItc.val().replace(/[^\d\.]/g, "")
        )
      );
    }
  });
});
javascript
html
jquery
css
EN

回答 2

Stack Overflow用户

发布于 2022-08-04 02:14:08

JQuery没有响应、Vue、Angular和许多其他服务的实时数据好处。因此，我们基本上需要告诉应用程序重新计算价格。

我不确定这是否是显示价格的正确代码，但这是相同的想法。

代码语言：javascript
复制
// Use roof complexity type to calculate solar roof price before incentive

// or updatePrice() or any other name that describes it how you like it
function handleRoofPriceChange() {
  if (roofCompInput.prop("selectedIndex") == 1) {
      roofPriceBeforeItc.val(
        moneyFormat.format(
          +calcRoofSqftInput.val() * 18 +
            2000 * +systemSizeInput.val().replace(" kW", "")
        )
      );
      if (roofPriceBeforeItc.val() !== 0 && pwrWallPriceBeforeItc.val() == 0) {
        pwrWallPriceBeforeItc.val(moneyFormat.format(0));
        estTotalBeforeItc.val(roofPriceBeforeItc.val());
        estItc.val(
          moneyFormat.format(
            +estTotalBeforeItc.val().replace(/[^\d\.]/g, "") * 0.26
          )
        );
        totalCostInput.val(
          moneyFormat.format(
            +estTotalBeforeItc.val().replace(/[^\d\.]/g, "") -
              +estItc.val().replace(/[^\d\.]/g, "")
          )
        );
      }
    } else if (roofCompInput.prop("selectedIndex") == 2) {
      roofPriceBeforeItc.val(
        moneyFormat.format(
          +calcRoofSqftInput.val() * 20 +
            2000 * +systemSizeInput.val().replace(" kW", "")
        )
      );
      if (roofPriceBeforeItc.val() !== 0 && pwrWallPriceBeforeItc.val() == 0) {
        pwrWallPriceBeforeItc.val(moneyFormat.format(0));
        estTotalBeforeItc.val(roofPriceBeforeItc.val());
        estItc.val(
          moneyFormat.format(
            +estTotalBeforeItc.val().replace(/[^\d\.]/g, "") * 0.26
          )
        );
        totalCostInput.val(
          moneyFormat.format(
            +estTotalBeforeItc.val().replace(/[^\d\.]/g, "") -
              +estItc.val().replace(/[^\d\.]/g, "")
          )
        );
      }
    } else if (roofCompInput.prop("selectedIndex") == 3) {
      roofPriceBeforeItc.val(
        moneyFormat.format(
          +calcRoofSqftInput.val() * 24 +
            2000 * +systemSizeInput.val().replace(" kW", "")
        )
      );
    }
    if (roofPriceBeforeItc.val() !== 0 && pwrWallPriceBeforeItc.val() == 0) {
      pwrWallPriceBeforeItc.val(moneyFormat.format(0));
      estTotalBeforeItc.val(roofPriceBeforeItc.val());
      estItc.val(
        moneyFormat.format(
          +estTotalBeforeItc.val().replace(/[^\d\.]/g, "") * 0.26
        )
      );
      totalCostInput.val(
        moneyFormat.format(
          +estTotalBeforeItc.val().replace(/[^\d\.]/g, "") -
            +estItc.val().replace(/[^\d\.]/g, "")
        )
      );
    }
}

$(document).ready(function () {
  roofCompInput.change(handleRoofPriceChange);
});

现在，您可以简单地在可能改变价格的每个函数的末尾调用handleRoofPriceChange()。

例如，如果您想在Powerwall数量更改后重新计算价格，您可以这样做(假设提取的代码正确地执行了一个单独的函数)：

代码语言：javascript
复制
pwrWallBattPlusBtn.click(function () {
  if (pwrWallBattInput.val() < 10) {
    pwrWallBattInput.get(0).value++;
  }
  handleRoofPriceChange() // or updatePrice()
});
票数 0
EN

Stack Overflow用户

发布于 2022-08-05 13:15:09

我决定在做了第一个选择之后，就禁用"Roof复杂性类型“。

我在用

$(This).prop(“禁用”，true)；

代码语言：javascript
复制
$(document).ready(function () {
  roofCompInput.change(function () {
    if (roofCompInput.prop("selectedIndex") == 1) {
      roofPriceBeforeItc.val(
        moneyFormat.format(
          +calcRoofSqftInput.val() * 18 +
            2000 * +systemSizeInput.val().replace(" kW", "")
        )
      );
      if (roofPriceBeforeItc.val() !== 0 && pwrWallPriceBeforeItc.val() == 0) {
        pwrWallPriceBeforeItc.val(moneyFormat.format(0));
        estTotalBeforeItc.val(roofPriceBeforeItc.val());
        estItc.val(
          moneyFormat.format(
            +estTotalBeforeItc.val().replace(/[^\d\.]/g, "") * 0.26
          )
        );
        totalCostInput.val(
          moneyFormat.format(
            +estTotalBeforeItc.val().replace(/[^\d\.]/g, "") -
              +estItc.val().replace(/[^\d\.]/g, "")
          )
        );
      }
      $(this).prop("disabled", true);
    } else if (roofCompInput.prop("selectedIndex") == 2) {
      roofPriceBeforeItc.val(
        moneyFormat.format(
          +calcRoofSqftInput.val() * 20 +
            2000 * +systemSizeInput.val().replace(" kW", "")
        )
      );
      if (roofPriceBeforeItc.val() !== 0 && pwrWallPriceBeforeItc.val() == 0) {
        pwrWallPriceBeforeItc.val(moneyFormat.format(0));
        estTotalBeforeItc.val(roofPriceBeforeItc.val());
        estItc.val(
          moneyFormat.format(
            +estTotalBeforeItc.val().replace(/[^\d\.]/g, "") * 0.26
          )
        );
        totalCostInput.val(
          moneyFormat.format(
            +estTotalBeforeItc.val().replace(/[^\d\.]/g, "") -
              +estItc.val().replace(/[^\d\.]/g, "")
          )
        );
      }
      $(this).prop("disabled", true);
    } else if (roofCompInput.prop("selectedIndex") == 3) {
      roofPriceBeforeItc.val(
        moneyFormat.format(
          +calcRoofSqftInput.val() * 24 +
            2000 * +systemSizeInput.val().replace(" kW", "")
        )
      );
      if (roofPriceBeforeItc.val() !== 0 && pwrWallPriceBeforeItc.val() == 0) {
        pwrWallPriceBeforeItc.val(moneyFormat.format(0));
        estTotalBeforeItc.val(roofPriceBeforeItc.val());
        estItc.val(
          moneyFormat.format(
            +estTotalBeforeItc.val().replace(/[^\d\.]/g, "") * 0.26
          )
        );
        totalCostInput.val(
          moneyFormat.format(
            +estTotalBeforeItc.val().replace(/[^\d\.]/g, "") -
              +estItc.val().replace(/[^\d\.]/g, "")
          )
        );
      }
      $(this).prop("disabled", true);
    }
  });
});
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/73229537

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档