Select Dropdown, make default Value not a selectable option

I have a form I want users to fill out. I have an array of options they can choose from but I don’t want any of them to be the default. I would like the drop down to say something like –Select– . Then when the users selects the dropdown, they can no longer select –Select–.

I am using Redux forms and React-Bootstrap for the presentation. I seen some answers on Stack Overflow, they say set the option to disable or add it as an option group. This resolve how it behaves when the dropdown opens but removes that option as a default option.

  let selectOptions = options.map((option, index) => {
    return (
      <option key={index} value={option}>
        {option}
      </option>
    );
  })
  const {value, ...inputs} = input
  
    return (
    <Aux>
      <Form.Label className="mb-1">{label}</Form.Label>
      {explanation && !readonly ? (
        <OverlayTrigger
          trigger="click"
          key={"right"}
          placement={"right"}
          overlay={
            <Popover id="popover-basic">
              <Popover.Header as="h3">{label}</Popover.Header>
              <Popover.Body>{explanation}</Popover.Body>
            </Popover>
          }
        >
          <i className="material-icons text-info align-top ml-2 cursor">help</i>
        </OverlayTrigger>
      ) : null}
      <Form.Control
        className={`${formStyle} ${validationStyle} ${noValidationStyle}`}
        disabled={readonly}
        as="select"
        placeholder="select"
        {...input}
        isInvalid={(touched || attempt) && !!error}
        isValid={!error}
      >
        {selectOptions}
      </Form.Control>

      {(touched || attempt) && !!error && !readonly ? (
        <Form.Control.Feedback type="invalid" className="animated fadeIn">
          {error}
        </Form.Control.Feedback>
      ) : (
        <span>{"u00A0"}</span>
      )}
    </Aux>

Answer

The select element has a handy .remove method you can use.

For example:

const selectEl = document.querySelector("#dropdown")
selectEl.addEventListener("change", removeDefault);

function removeDefault(event){
  const selectEl = event.target;

  if(selectEl.options[0].value == "myDefault"){
    selectEl.remove(0);
  }
}
select { width: 9em; font-size: 2em; }
<select id="dropdown">
  <option value="myDefault">Choose Wisely</option>
  <option value="river">River</option>
  <option value="mal">Mal</option>
  <option value="zoe">Zoe</option>
  <option value="book">Shepherd Book</option>
</select>
Source: stackoverflow
The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .