Javascript 如何从 html 中选择第一个选项元素？ [复制]答案

【问题标题】：Javascript How do i select the first option element from html? [duplicate]Javascript 如何从 html 中选择第一个选项元素？ [复制]
【发布时间】：2021-02-19 21:32:13
【问题描述】：

我是 javascript 的初学者。我如何在javascript中选择html“<option value="">Choose an image...</option>”中的第一个选项？ *不改变html？

我的猜测是：memeForm.getElementById('meme-image').getElementByName('option') ??

我想选择这个，这样如果用户选择这个（这是默认设置），他们会收到一条错误消息。提前致谢。

window.addEventListener('load', function(e){
    const memeForm = document.querySelector('.meme-form');

    memeForm.addEventListener('submit', function(e){
        e.preventDefault();

        if()

        });
})

<form class="meme-form">
  <div class="form-control">
    <label for="meme-image">Meme Image</label>
    <select name="memeImage" id="meme-image">
      <option value="">Choose an image...</option>
      <option value="cat-meme">Cat Meme</option>
      <option value="dog-meme">Dog Meme</option>
      <option value="man-meme">Man Man</option>
    </select>

【问题讨论】：

标签： javascript html

【解决方案1】：

window.addEventListener('load', function(e) {
  const memeForm = document.querySelectorAll('select option')[0];
  console.log(memeForm.value)
})

<form class="meme-form">
  <div class="form-control">
    <label for="meme-image">Meme Image</label>
    <select name="memeImage" id="meme-image">
      <option value="...">Choose an image...</option>
      <option value="fry-meme">Fry Meme</option>
      <option value="one-does-not-simply-meme">One Does Not Simply Meme</option>
      <option value="most-interesting-man-meme">Most Interesting Man</option>
    </select>

或：

  const memeForm = document.querySelector('select option:first-of-type');

或来自报告的重复主题的许多其他方式...

您也应该为此使用 HTML selected disabled：

<form class="meme-form">
  <div class="form-control">
    <label for="meme-image">Meme Image</label>
    <select name="memeImage" id="meme-image">
      <option value="..." selected disabled>Choose an image...</option>
      <option value="fry-meme">Fry Meme</option>
      <option value="one-does-not-simply-meme">One Does Not Simply Meme</option>
      <option value="most-interesting-man-meme">Most Interesting Man</option>
    </select>

【讨论】：

【解决方案2】：

您还可以在选项中添加“禁用”道具，这样一旦选择组合打开，用户将无法选择它。

<option disabled value="">Choose an image...</option>

【讨论】：