0

i'm a beginner at javascript. How do i select in javascript the first option in html "<option value="">Choose an image...</option>"? *without changing the html?

My guess is this: memeForm.getElementById('meme-image').getElementByName('option') ??

I want to select this so that if the user picks this one (which is the default) they get an error message. Thanks in advance.

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>
tiger123
  • 1
  • 2

2 Answers2

0

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>

or:

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

or numerous other ways from reported duplicate topic...

Also you should just use HTML selected disabled for this:

<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>
ikiK
  • 6,328
  • 4
  • 20
  • 40
0

You can also add a "disabled" prop to the option, so the user won't be able to choose it once the select combo is open.

<option disabled value="">Choose an image...</option>
Rodrigo
  • 740
  • 5
  • 7