javascript - 依赖于下拉选项的文本的 JS 代码

Question

我第一次尝试将一些 JavaScript 添加到我的 HTML 中。

在这个论坛上已经远远没有提供有用的回复；我有一些我认为很接近但不起作用的东西:

HTML

<select id="carSelect">
  <option></option>
  <option value="Audi">Audi</option>
  <option value="Ferrari">Ferrari</option>
  <option value="Fiat">Fiat</option>
</select>

<p id="choiceDisplay">
  Selection Display
</p> 

JavaScript:

$('select').change(function(){
        const options = $("option");
    let selectedOption = "";
    let displayString = "";
    options.each(function(index){
        let option = options[index];
      if($(option).prop("selected")) {
        selectedOption = $(option).val();
      };
      if(selecetedOption === "Audi") {
        displayString = "Oh I used to have one of those";
      };
    });
    $("#choiceDisplay").empty().append(displayString);
});

我有一个 jsfiddle link也是。

Answer 1

看起来你只是打错了字:

if (selecetedOption === "Audi") {

无论如何，你可能不需要那个.each阻止从 <select> 获取值:

$("select").change((e) => {
  const value = e.target.value || '☝️ Please, select an option';
  const displayString = value === "Audi" ? "Audi - Oh I used to have one of those" : value;

  $("#choiceDisplay").empty().append(displayString);
});

<select id="carSelect">
  <option></option>
  <option value="Audi">Audi</option>
  <option value="Ferrari">Ferrari</option>
  <option value="Fiat">Fiat</option>
</select>

<p id="choiceDisplay">☝️ Please, select an option.</p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>