更改所选选项时，为什么条件不起作用？

Question

当@Output() status=new EventEmitter(); public getStatus(s) { this.status.emit(s) } 更改时，文本应该更改。 Here's a fiddle.

＆＃13;

＆＃13;

select

＆＃13;

(function($) {

  'use strict';

  function funcFormCalc() {
    var s1_is_1 = $("#s1").value === '1',
        s1_is_2 = $("#s1").value === '2';

    var s2_is_1 = $("#s2").value === '1',
        s2_is_2 = $("#s2").value === '2';
        
    $('#myForm').onchange = function() {
      
      if (s1_is_1 && s2_is_1) {
        $('#result').html('result 1');
      } else if (s1_is_2 && s2_is_1) {
        $('#result').html('result 2');
      } else if (s1_is_1 && s2_is_2) {
        $('#result').html('result 3');
      } else {
        $('#result').html('result 4');
      }

    };
  }
  funcFormCalc();

})(window.jQuery);

＆＃13;

＆＃13;

＆＃13;

为什么选择更改后结果文本不会改变？

Answer 1

您正在使用selectVariant布尔值来确定要显示的值，但这些变量仅在加载时计算一次。您可能打算在onchange函数中进行计算。

此外，您的值与select2的选项不匹配。

<option value="1 story house">1 story house</option>
<option value="2 story house">2 story house</option>
<option value="3 story house +">3 story house +</option>

- 请参阅底部的代码段，了解原始答案并进行一些额外的重构。 -

编辑：自我第一次回答以来，您完全更改了问题中的代码......

虽然我的答案是一样的。您需要在selectVariant1方法中重新计算selectVariant2，select2Variant1，select2Variant2和onchange。

＆＃13;

＆＃13;

(function($) {

  'use strict';

  function funcFormCalc() {
    var formCalc = document.getElementsByClassName('form-calc')[0],
      formCalcResult = document.getElementsByClassName('form-calc__result')[0],

      selectHowManyTrees = document.getElementById('selectHowManyTrees'),
      selectApproximateHeightTree = document.getElementById('selectApproximateHeightTree');
      
    formCalc.onchange = function() {

    var selectVariant1 = selectHowManyTrees.value === '1',
      selectVariant2 = selectHowManyTrees.value === '2';

    var select2Variant1 = selectApproximateHeightTree.value === '1',
      select2Variant2 = selectApproximateHeightTree.value === '2';    
 
      if (selectVariant1 && select2Variant1) {
        formCalcResult.innerHTML = 'variant text 1';
      } else if (selectVariant2 && select2Variant1) {
        formCalcResult.innerHTML = 'variant text 2';
      } else if (selectVariant1 && select2Variant2) {
        formCalcResult.innerHTML = 'variant text 3';      
      } else {
        formCalcResult.innerHTML = 'for all variants';
      }

    };
  }
  funcFormCalc();



})(window.jQuery);

＆＃13;

* {
  padding: 0;
  margin: 0;
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body {
  overflow-x: hidden;
}

html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
  background: #fff;
  color: #2C2D2C;
  text-align: left;
  font-family: 'Montserrat', Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.form-calc {
  max-width: 400px;
  margin: 15px auto;
  background: #FAFAFA;
  padding: 15px 30px;
}

.form-calc__item {
  margin-bottom: 28px;
}

.form-calc__label {
  font-size: 14px;
  display: block;
  margin: 6px 0 9px;
  letter-spacing: 0.25px;
}

.form-calc__select-container {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 100%;
}

.form-calc__select-container:before,
.form-calc__select-container:after {
  content: '';
  position: absolute;
  right: 7px;
  width: 0;
  height: 0;
  border-style: solid;
  pointer-events: none;
}

.form-calc__select-container:before {
  top: 16.5px;
  border-width: 0 3.5px 4px 3.5px;
  border-color: transparent transparent #333 transparent;
}

.form-calc__select-container:after {
  bottom: 16.5px;
  border-width: 4px 3.5px 0 3.5px;
  border-color: #333 transparent transparent transparent;
}

.form-calc__select {
  font-family: 'Montserrat', Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
  -webkit-appearance: none;
  -moz-appearance: none;
  text-indent: 1px;
  text-overflow: '';
  width: 100%;
  height: 43px;
  line-height: 43px;
  border: 1px solid #D9D9D9;
  padding: 0 7px;
  color: #2C2D2C;
}

.form-calc__select::-ms-expand {
  display: none;
}

.form-calc__select option {
  padding: 3px 7px;
  border: none;
}

.form-calc__result {
  font-size: 36px;
  font-weight: 500;
  color: #3E3F3E;
  line-height: 1.4;
  margin-bottom: 6px;
}

.form-calc__result-subtext {
  font-size: 12px;
  text-transform: uppercase;
  color: #3E3F3E;
  letter-spacing: .6px;
  line-height: 1.25;
}

.form-calc__submit {
  font-family: 'Montserrat', Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
  display: inline-block;
  vertical-align: top;
  color: #fff;
  text-align: center;
  min-width: 170px;
  padding: 14px 20px;
  background: #42BF8D;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  letter-spacing: 0.5px;
  font-size: 12px;
  cursor: pointer;
  -webkit-transition: .3s;
  transition: .3s;
}

.form-calc__submit:hover,
.form-calc__submit:focus,
.form-calc__submit:active {
  color: #fff;
  background: #2F8B66;
}

.form-calc__submit:focus {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, .25);
}

＆＃13;

<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700&amp;subset=latin-ext" rel="stylesheet">

<form action="#" method="post" class="form-calc" autocomplete="off">
  <div class="form-calc__item">
    <label for="selectHowManyTrees" class="form-calc__label">Label 1</label>

    <div class="form-calc__select-container">
      <select name="select1" id="selectHowManyTrees" class="form-calc__select">
        <option value="1" selected>1</option>
        <option value="2">2</option>        
      </select>
    </div>
  </div>
  <div class="form-calc__item">
    <label for="selectApproximateHeightTree" class="form-calc__label">Label 2</label>

    <div class="form-calc__select-container">
      <select name="select2" id="selectApproximateHeightTree" class="form-calc__select">
        <option value="1">1 story house</option>
        <option value="2">2 story house</option>       
      </select>
    </div>
  </div>  
  <div class="form-calc__item">
    <div class="form-calc__result">variant text 1</div>    
  </div>  
</form>

＆＃13;

＆＃13;

＆＃13;

编辑2：回复评论中的问题。

  

对不起！不是一个大问题。你会如何解决这个问题？ （其他逻辑）。

这是一个非常自以为是的问题，所以这个答案只是我的观点。总的来说，我认为你有一个相当不错的解决方案。

你的问题基本上是： 根据输入组合显示结果。

因此需要有一些方法来根据输入计算一个值。如果你能用数学方法做到这一点最好，比如value1 + value2 + value3 = result。不幸的是，这对您的问题似乎不太可能，但如果您能够进行轻微的设计更改，那么您可以尝试这种替代方案：

1. 修改表单，以便每个选项都有low-value和high-value。

<select name="select1" id="selectHowManyTrees" class="form-calc__select">
    <option low-value="20" high-value="30" selected>1</option>
    <option low-value="30" high-value="40">2</option>
    <option low-value="40" high-value="50">3</option>
    <option low-value="50" high-value="60">4</option>
</select>
<select name="select2" id="selectApproximateHeightTree" class="form-calc__select">
    <option low-value="100" high-value="180" story house">1 story house</option>
    <option low-value="170" high-value="300" story house">2 story house</option>
    <option low-value="220" high-value="600" story house +">3 story house +</option>
</select>

1. 汇总所有选定的low-value和所有选定的high-value以计算结果。

var low = 0, high = 0;
var selects = document.getElementsByClassName('form-calc__select');
for(var s of selects) {
   var selectedOption = s.options[ s.selectedIndex ];
   low += selectedOption.getAttribute('low-value');
   high += selectedOption.getAttribute('high-value');
}

1. 将其显示为结果的范围。

formCalcResult.innerHTML = '$' + low + ' - $' + high;

或ES6 string interpolation

formCalcResult.innerHTML = `$${low} - $${high}`;

现在可能你不能这样做，并且没有办法以数学方式计算结果。在这种情况下，您不得不找到一种方法将输入组合链接到结果，这是您使用一堆布尔值所做的。

你怎么能做得更好？ 数据库。

存储数据关系的理想位置在数据库中。然后您的应用程序可以动态显示所有选项和结果。这将允许您只要更改值只更新数据而不是更新整个应用程序。它也是存储不同选项组合的一种非常易读的方式。例如，您可以拥有一个如下所示的表：

NumberOfTreesId | TreeHeightId | JobTypeId | LocationPropertyId |Result
1               | 1            | 1         | 1                  | '$250 - $610'
1               | 1            | 1         | 2                  | '$350 - $825'

此示例类似于SQL，但如果您愿意，可以使用非关系数据库执行非常类似的操作。

当然，使用数据库会给应用程序增加很多复杂性，而你只是在做一个JS教程，所以绝对有点过分。毕竟我会说设计方面你的代码完全没问题。有很多方法可以重构，使其更具可读性和更少的代码，但最终概念将是相同的。

有很多方法可以用不同的方式编写，这是一种方式：

＆＃13;
＆＃13;
(function($) {

  'use strict';
  
  var results = [ ];
  
  function addResult(s1, s2, s3, s4, r) {
     results.push({
        select1 : s1,
        select2 : s2,
        select3 : s3,
        select4 : s4,
        result : r
     });
  }
  
  var defaultResult = '$450 - $750';
  addResult('1', '1', '1', '1', '$250 - $610');
  addResult('1', '1', '1', '2', '$350 - $825');
  addResult('1', '1', '1', '3', '$250 - $610');
  addResult('1', '2', '1', '1', '$425 - $1200');
  addResult('1', '2', '1', '2', '$546 - $1620');
  addResult('1', '2', '1', '3', '$420 - $1200');
  addResult('1', '3', '1', '1', '$750 - $1800');
  addResult('1', '3', '1', '2', '$900 - $2000');
  addResult('2', '1', '1', '1', '$500 - $850');
  addResult('2', '1', '1', '2', '$650 - $1000');
  addResult('2', '1', '1', '3', '$500 - $850');  

  function funcFormCalc() {
    var formCalc = document.getElementsByClassName('form-calc')[0],
      formCalcResult = document.getElementsByClassName('form-calc__result')[0],
 
      selectHowManyTrees = document.getElementById('selectHowManyTrees'),
      selectApproximateHeightTree = document.getElementById('selectApproximateHeightTree'),
      selectJobType = document.getElementById('selectJobType'),
      selectLocationProperty = document.getElementById('selectLocationProperty');

    
    formCalc.onchange = function() {
    
      var s1 = selectHowManyTrees.value,
          s2 = selectApproximateHeightTree.value,
          s3 = selectJobType.value,
          s4 = selectLocationProperty.value;
      
      var text = defaultResult;
      for(var result of results)
      {
         if(s1 === result.select1 &&
            s2 === result.select2 &&
            s3 === result.select3 &&
            s4 === result.select4) {
            text = result.result;
         }
      }
      
      formCalcResult.innerHTML = text;
      //console.log(`${s1} ${s2} ${s3} ${s4}`);
    };
  }
  funcFormCalc();



})(window.jQuery);
＆＃13;
* {
  padding: 0;
  margin: 0;
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body {
  overflow-x: hidden;
}

html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
  background: #fff;
  color: #2C2D2C;
  text-align: left;
  font-family: 'Montserrat', Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.form-calc {
  max-width: 400px;
  margin: 15px auto;
  background: #FAFAFA;
  padding: 15px 30px;
}

.form-calc__item {
  margin-bottom: 28px;
}

.form-calc__label {
  font-size: 14px;
  display: block;
  margin: 6px 0 9px;
  letter-spacing: 0.25px;
}

.form-calc__select-container {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 100%;
}

.form-calc__select-container:before,
.form-calc__select-container:after {
  content: '';
  position: absolute;
  right: 7px;
  width: 0;
  height: 0;
  border-style: solid;
  pointer-events: none;
}

.form-calc__select-container:before {
  top: 16.5px;
  border-width: 0 3.5px 4px 3.5px;
  border-color: transparent transparent #333 transparent;
}

.form-calc__select-container:after {
  bottom: 16.5px;
  border-width: 4px 3.5px 0 3.5px;
  border-color: #333 transparent transparent transparent;
}

.form-calc__select {
  font-family: 'Montserrat', Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
  -webkit-appearance: none;
  -moz-appearance: none;
  text-indent: 1px;
  text-overflow: '';
  width: 100%;
  height: 43px;
  line-height: 43px;
  border: 1px solid #D9D9D9;
  padding: 0 7px;
  color: #2C2D2C;
}

.form-calc__select::-ms-expand {
  display: none;
}

.form-calc__select option {
  padding: 3px 7px;
  border: none;
}

.form-calc__result {
  font-size: 36px;
  font-weight: 500;
  color: #3E3F3E;
  line-height: 1.4;
  margin-bottom: 6px;
}

.form-calc__result-subtext {
  font-size: 12px;
  text-transform: uppercase;
  color: #3E3F3E;
  letter-spacing: .6px;
  line-height: 1.25;
}

.form-calc__submit {
  font-family: 'Montserrat', Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
  display: inline-block;
  vertical-align: top;
  color: #fff;
  text-align: center;
  min-width: 170px;
  padding: 14px 20px;
  background: #42BF8D;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  letter-spacing: 0.5px;
  font-size: 12px;
  cursor: pointer;
  -webkit-transition: .3s;
  transition: .3s;
}

.form-calc__submit:hover,
.form-calc__submit:focus,
.form-calc__submit:active {
  color: #fff;
  background: #2F8B66;
}

.form-calc__submit:focus {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, .25);
}
＆＃13;
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700&amp;subset=latin-ext" rel="stylesheet">

<form action="#" method="post" class="form-calc" autocomplete="off">
  <div class="form-calc__item">
    <label for="selectHowManyTrees" class="form-calc__label">How many trees?</label>

    <div class="form-calc__select-container">
      <select name="select1" id="selectHowManyTrees" class="form-calc__select">
        <option value="1" selected>1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
      </select>
    </div>
  </div>
  <div class="form-calc__item">
    <label for="selectApproximateHeightTree" class="form-calc__label">What is the approximate height of the tree?</label>

    <div class="form-calc__select-container">
      <select name="select2" id="selectApproximateHeightTree" class="form-calc__select">
        <option value="1">1 story house</option>
        <option value="2">2 story house</option>
        <option value="3">3 story house +</option>
      </select>
    </div>
  </div>
  <div class="form-calc__item">
    <label for="selectJobType" class="form-calc__label">Job Type?</label>

    <div class="form-calc__select-container">
      <select name="select3" id="selectJobType" class="form-calc__select">
        <option value="-1">Complete tree removal</option>
        <option value="1">Tree Removal</option>
        <option value="2">Tree Prune</option>
        <option value="3">Palm Removal</option>
        <option value="4">Palm Prune</option>
        <option value="5">Arborist Report</option>
      </select>
    </div>
  </div>
  <div class="form-calc__item">
    <label for="selectLocationProperty" class="form-calc__label">Trees location on your property?</label>

    <div class="form-calc__select-container">
      <select name="select4" id="selectLocationProperty" class="form-calc__select">
        <option selected>Front Yard</option>
        <option value="1">Access via a driveway (wide)</option>
        <option value="2">Access via a gate (narrow)</option>
        <option value="3">Vacant land</option>
      </select>
    </div>
  </div>
  <div class="form-calc__item">

    <div class="form-calc__result">$250 - $610</div>
    <div class="form-calc__result-subtext">Expected price range in Australia</div>

  </div>
  <div class="form-calc__item">
    <button type="submit" class="form-calc__submit">Request a quote</button>
  </div>
</form>
＆＃13;
＆＃13;
＆＃13;