javascript - HTML JS 选择默认选项

Question

我有一个如下所示的 select 元素。当用户选择一个选项时，将调用 this.handleSelectClass，这又会呈现另一个输入字段。(select 语句位于 Bootstrap 模式中)

 <select class="form-control" onChange={this.handleSelectClass}>
          <option>Small</option>
          <option>Medium</option>
          <option>Large</option>
  </select>

但是，我注意到，如果我打开表单并选择第一个选项，则不会呈现任何内容。这可能是因为 React 没有看到任何更改，因此它不会调用 onChange。

所以我尝试添加一个空选项。

<select class="form-control" onChange={this.handleSelectClass}>
              <option><option>
              <option>Small</option>
              <option>Medium</option>
              <option>Large</option>
</select>

现在的问题是，在第一次选择后，空选项保留在选项列表中，这使得列表看起来很难看，并且当我选择空选项时，也使我的程序抛出错误。

我还尝试仅在未选择类别时显示空选项。

<select class="form-control" onChange={this.handleSelectClass}>
                  {!this.state.categorySelected ? <option></option> : <div></div>}
                  <option>Small</option>
                  <option>Medium</option>
                  <option>Large</option>
</select>

但是，这也不起作用，因为选择元素位于模态中。如果我选择 Small 并关闭模式，当我再次打开它时，默认选项将为 Small 而不是空选项。

如何才能使每次打开包含的模态时都有默认的选择选项？然后，在我做出第一个选择后，我希望默认选项消失。

Answer 1

要创建 HTML 选择元素，使用默认选定的项目，您可以将禁用、选定的属性应用到选项元素。

http://codepen.io/anon/pen/qOvqrL

<select class="form-control">
      <option disabled selected>Default option</option>
      <option>Small</option>
      <option>Medium</option>
      <option>Large</option>
</select>