Блог

У меня есть форма, которую я хочу, чтобы пользователи заполняли. У меня есть множество вариантов, из которых они могут выбирать, но я не хочу, чтобы какой-либо из них был по умолчанию. Я бы хотел, чтобы в раскрывающемся списке было написано что-то вроде —Select— . Затем, когда пользователи выбирают выпадающий список, они больше не могут выбирать —Select— .

Я использую формы Redux и React-Bootstrap для презентации. Я видел несколько ответов на переполнение стека, они говорят, что установите параметр для отключения или добавьте его в качестве группы опций. Это решает, как он ведет себя при открытии выпадающего списка, но удаляет этот параметр как параметр по умолчанию.

   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 amp;amp; !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) amp;amp; !!error}
        isValid={!error}
      >
        {selectOptions}
      </Form.Control>

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

Элемент select имеет удобный .remove метод, который вы можете использовать.

Например:

 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>