Javascript 我如何 select html 的第一个选项元素？ [复制]

Question

这个问题在这里已经有了答案：

Javascript 到 select select 列表的第一个选项（7 个答案）

6 个月前关闭。

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

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

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

 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>

Answer 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>

Answer 2

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

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