javascript - 如何在 JavaScript 中获取 HTML 选项值？

Question

您好，感谢阅读。我刚刚开始使用 JavaScript，我正在尝试收集 HTML 选项值作为变量。

我创建了一个执行 onchange 的函数，该函数应该收集最新的选定值并在警报窗口中显示该值。我使用 console.log 查看是否设置了变量。它似乎被设置为未定义。确实会出现一个弹出窗口，但它始终显示 if 语句文本。

我发誓我已经接近解决方案，但我似乎找不到与我在网上尝试完成的目标相匹配的示例。

HTML

<form>
    <select id="GameSeries" onchange="choose1()">
      <!-- Default Option -->
      <option value="">Select Game:</option>
      <!-- Art of Fighting-->
      <option value="AOF">Art of Fighting</option>
      <!-- Guilty Gear -->
      <option value="GG">Guilty Gear</option>
      <!-- King of Fighters -->
      <option value="KOF">The King of Fighters</option>
      <!-- Last Blade -->
      <option value="LB">Last Blade</option>
      <!-- Soul Calibur -->
      <option value="SC">Soul Calibur</option>
      <!-- Street Fighter -->
      <option value="SF1">Street Fighter</option>
      <option value="SF2">Street Fighter 2</option>
    </select>

  </form>

JS

//Attempt 2

var chsfirst;

function choose1 () {
    var chsfirst = document.getElementById("GameSeries").value;
  //ar chsfirst = e.options[e.selectedIndex].value; 
  if (chsfirst = 'AOF') {
    alert("Art of Fighting"); }
  else if (chsfirst != 'AOF')  {
    alert("Not Art of Fighting"); }
};

console.log(chsfirst);

// Attempt 1
/*
function choose1 () {
  //first option event
  document.getElementById('GameSeries').value;
  if ElementById('GameSeries').value="AOF",
  window.alert("this worked!");
  //second option event
};
*/

对不起，如果我的术语不对。

非常感谢所有的帮助。

Answer 1

var chsfirst;

function choose1 () {
    chsfirst = document.getElementById("GameSeries").value;
  if (chsfirst === 'AOF') {
    alert("Art of Fighting"); }
  else if (chsfirst != 'AOF')  {
    alert("Not Art of Fighting"); }
    console.log(chsfirst);
};

<form>
    <select id="GameSeries" onchange="choose1()">
      <!-- Default Option -->
      <option value="">Select Game:</option>
      <!-- Art of Fighting-->
      <option value="AOF">Art of Fighting</option>
      <!-- Guilty Gear -->
      <option value="GG">Guilty Gear</option>
      <!-- King of Fighters -->
      <option value="KOF">The King of Fighters</option>
      <!-- Last Blade -->
      <option value="LB">Last Blade</option>
      <!-- Soul Calibur -->
      <option value="SC">Soul Calibur</option>
      <!-- Street Fighter -->
      <option value="SF1">Street Fighter</option>
      <option value="SF2">Street Fighter 2</option>
    </select>

  </form>

您已经创建了 var chsfirst，您不需要再次创建它，只需赋值即可。