Select 下拉菜单，使默认值不可选

Question

我有一个表格需要用户填写。我有一系列可供他们选择的选项，但我不希望其中任何一个成为默认选项。我希望下拉菜单显示类似 --Select-- 的内容。那么当用户selects下拉时，就不能再select--Select--.

我正在使用 Redux 表单和 React-Bootstrap 进行演示。我在 Stack Overflow 上看到了一些答案，他们说将选项设置为禁用或将其添加为选项组。这解决了下拉菜单打开时的行为方式，但将该选项作为默认选项删除。

  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 1

select element 有一个方便的 .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>

Select 下拉菜单，使默认值不可选

Select Dropdown, make default Value not a selectable option

javascript

reactjs

react-bootstrap

redux