javascript - 根据下拉列表值将附加文本插入 HTML 页面

Question

我希望在以下方面得到一些建议。我有一个下拉框，它有 15 个单独的选项，当选择一个选项时，它下面会显示一段文本。因此，我有 15 段文本，每段都作为“值”分配给下拉选项。

当选择一个选项时，该值显示在下拉框下方。

从 SEO 的 Angular 来看，我被告知这可能是不好的做法，因为 Google 可能会将其视为“隐藏”文本，并在排名时降低页面的权重。

我怎样才能将文本保留在单独的页面上，并根据下拉列表值“提取”附加值？

我正在处理的代码在这里: https://codepen.io/mgsolid2010/pen/amrxRA

HTML

<label for="car">Car</label>
<select id="car">  
  <option value="---Select Option---">---Select Option---</option>
  <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="---Select Option---">---Select Option---</option>
  <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 an option from the dropdown list above.</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 == "---Select Option---" || engine == "---Select Option---" ){
  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);
  }
});

非常感谢

Answer 1

我不认为这应该是 SEO 的问题，这是一件很正常的事情。唯一的其他方法是将文本存储为 javascript 字符串并在需要时插入/删除它。但我不会这样做。