HTML下拉菜单-错误消息

Question

我目前有一个有效的HTML下拉选项，带有一个提交按钮，该按钮根据选择的选项显示文本（感谢SO成员Paul Redmond创建它）。

<label for="car">Car</label>
<select id="car">
  <option value="Ford">Ford</option>
  <option value="Fiat">Fiat</option>
  <option value="Volvo">Volvo</option>
</select>

<label for="engine">Engine</label>
<select id="engine">
  <option value="1.4 Petrol">1.4 Petrol</option>
  <option value="1.6 Petrol">1.6 Petrol</option>
  <option value="2.0 TDI">2.0 TDI</option>
</select>

<button id="process">Update</button>

<p>You have chosen a <span class="car">Ford </span> with a <span class="engine">1.4 Petrol</span> engine.</p>

CodePen链接： http ：//codepen.io/paulcredmond/pen/jrdowR

我想知道如何隐藏文本在HTML文件的底部，并仅在用户按下“更新”后才显示。

我还想知道如何将IF语句添加到JS代码中，以便如果未使用/未选择一个或两个下拉菜单，那么它将通过编辑HTML代码底部的文本来提示用户。

如果答案很明显，我会道歉，我对HTML和JS的了解非常有限，而且整个上午的努力似乎都是徒劳的。

感谢您的阅读和任何指导。

编辑（更新）：

这是我尝试编辑JS的尝试，但是我不太确定如何删除HTML文本块并仅从IF语句显示文本。

$('#process').on('click', function() {
  var car = $('#car :selected').text();
  var engine = $('#engine :selected').text();
  if (car == "Ford"){ 
  $('p .car').text("Error");
  $('p .engine').text("Error");
  } else{
  $('p .car').text(car);
  $('p .engine').text(engine);
  }
});

Answer 1

我已经设法解决此问题，它是：

1.）仅在按下按钮时显示以下文本。

2.）如果从下拉框中选择了特定值，则隐藏文本，而应显示一条错误消息。

HTML代码：

<!--Credit to StackOverflow member Paul Redmond-->
<label for="car">Car</label>
<select id="car">
  <option value="Ford">Ford</option>
  <option value="Fiat">Fiat</option>
  <option value="Volvo">Volvo</option>
</select>

<label for="engine">Engine</label>
<select id="engine">
  <option value="1.4 Petrol 1.4">1.4 Petrol1</option>
  <option value="1.6 Petrol">1.6 Petrol</option>
  <option value="2.0 TDI">2.0 TDI</option>
</select>

<button id="process">Update</button>



<a id="displayText" style="display: none"><p>Please Select Another Option</p></a>
<div id="toggleText" style="display: none"><h1><p>You have chosen a <span class="car">Ford </span> with a <span class="engine">1.4 Petrol</span> engine.</p></h1></div>

JS代码

$('#process').on('click', function() {
  var ele = document.getElementById("toggleText");
    var text = document.getElementById("displayText");
  var car = $('#car :selected').text();
  var engine = $('#engine :selected').text();

  if (car == "Fiat"){
  ele.style.display = "none";
  text.style.display = "block";
  } else{
  ele.style.display = "block";
  text.style.display = "none";
  $('p .car').text(car);
  $('p .engine').text(engine);
  }
});

如果有更简单的方法可以实现此目的，或者发现错误，请告诉我。